深入剖析 Vue 组件的三驾马车：Prop、Event 和 Slot

2023-09-02 05:58:04

不管多么复杂的 Vue 组件，一定都是由属性 Prop，事件 Event 和插槽 Slot 三种 API 组成。如果你想要开发一个通用组件，那么一定要深入理解这三个 API，做好程序的设计，解耦组件的交互逻辑，分发不同的内容。

Prop：组件的属性

Prop 是组件的属性，用于向子组件传递数据或配置。Prop 可以是简单的数据类型，如字符串、数字或布尔值，也可以是复杂的对象或数组。

在子组件中，可以通过 this.propName 访问 Prop 的值。例如，如果子组件有一个名为 title 的 Prop，则可以在子组件中通过 this.title 访问该 Prop 的值。

Event：组件的事件

Event 是组件的事件，用于在组件之间传递消息或触发动作。当组件发生某些事件时，可以触发一个 Event，从而通知父组件或其他组件。

在子组件中，可以使用 this.emit('eventName', data) 来触发一个 Event。例如，如果子组件有一个名为 click 的 Event，则可以在子组件中通过 this.emit('click', data) 来触发该 Event，并将 data 作为参数传递给父组件或其他组件。

Slot：组件的插槽

Slot 是组件的插槽，用于在组件内部插入内容。Slot 可以用来插入 HTML 代码、组件或其他内容。

在子组件中，可以使用标签来插入内容。例如，如果子组件有一个名为 header 的 Slot，则可以在子组件中通过内容来插入内容。

理解 Prop、Event 和 Slot 的重要性

Prop、Event 和 Slot 是 Vue 组件的三驾马车，也是创建通用组件和实现组件交互的基础。通过理解这三个 API，您可以设计出解耦、灵活的组件，并在开发过程中实现代码复用。

举个例子

我们来看一个简单的例子，演示如何使用 Prop、Event 和 Slot 来创建一个通用组件。

假设我们想要创建一个名为 MyComponent 的通用组件，该组件可以接受一个名为 title 的 Prop，并触发一个名为 click 的 Event。

// MyComponent.vue
<template>
  <div>
    <h1>{{ title }}</h1>
    <button @click="$emit('click')">Click Me</button>
  </div>
</template>

<script>
export default {
  props: ['title'],
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

在父组件中，我们可以使用 MyComponent 组件如下所示：

<template>
  <MyComponent title="Hello World" @click="handleClick" />
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Clicked!')
    }
  }
}
</script>