Vue组件进阶:Props、Emit、Slots，玩转组件交互的精髓!

哈喽，各位前端攻城狮们！组件化开发是现代前端的基石，而Vue作为一款优秀的组件化框架，其组件的灵活运用至关重要。今天，我们就来深入探讨 Vue 组件的高级用法，包括 props、emit 和 slots，让你彻底掌握组件间的交互，打造可复用、易维护的前端应用！

组件的基石：Props

Props（属性）是父组件向子组件传递数据的桥梁。通过 props，我们可以将父组件的状态传递给子组件，从而实现数据的单向流动。

基本用法：

<script>
import Child from './Child.vue';
export default {
  components: { Child },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    }
  }
};
</script>

<script>
export default {
  props: ['message']
};
</script>

代码解读：

• 在父组件中，通过 :message="parentMessage" 将 parentMessage 的值传递给子组件的 message prop。
• 在子组件中，通过 props: ['message'] 声明接收一个名为 message 的 prop。

Props 的类型校验：

为了保证数据的可靠性，我们可以对 props 进行类型校验：

<script>
export default {
  props: {
    message: String,
    count: {
      type: Number,
      required: true, // 必须传入
      default: 0 // 默认值
    },
    options: {
      type: Array,
      validator(value) { // 自定义校验器
        return value.every(item => typeof item === 'string');
      }
    }
  }
};
</script>

content_copyUse code with caution.Vue

Props 的总结：

• Props 是父组件向子组件传递数据的单向通道。
• 可以进行类型校验、设置默认值和自定义校验器，保证数据的可靠性。
• Props 是不可修改的，子组件只能读取 props 的值，不能直接修改它。

组件的“发声器”：Emit

Emit（发射）是子组件向父组件传递事件和数据的桥梁。当子组件内部发生了一些变化，需要通知父组件时，就可以使用 emit。

基本用法：

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('button-click', 'button clicked!'); // 发射一个 'button-click' 事件
    }
  }
};
</script>

<script>
import Button from './Button.vue';
export default {
  components: { Button },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleButtonClick(msg) {
      this.message = msg; // 接收子组件传来的数据
    }
  }
};
</script>

代码解读：

• 在子组件中，通过 this.$emit('button-click', 'button clicked!') 发射一个名为 button-click 的事件，并传递数据 "button clicked!"。
• 在父组件中，通过 @button-click="handleButtonClick" 监听 button-click 事件，并执行 handleButtonClick 方法。

Emit 的总结：

• Emit 是子组件向父组件传递事件和数据的通道。
• 可以通过 $emit 发射事件，并通过 @ 监听事件。
• 可以传递任意类型的数据。

组件的“插槽”：Slots

Slots（插槽）是Vue组件内容分发的强大工具。通过 slots，我们可以让父组件更加灵活地控制子组件的内容，实现更强大的组件复用。

默认插槽：

<script>
import Card from './Card.vue';
export default {
  components: { Card }
};
</script>

代码解读：

• 在子组件中，使用 定义插槽的位置。如果子组件定义了 name 属性，父组件用 v-slot:name 或者 #name来绑定插槽，否则父组件所有子节点会被添加到子组件的默认插槽
• 在父组件中，将需要插入到插槽中的内容包裹在