Vue独立组件：深入浅出prop、event与slot

2024-01-13 01:48:11

Vue 组件开发的三大基石：prop、event 和 slot

在 Vue 开发的世界中，组件扮演着至关重要的角色，它们允许我们构建可重用且模块化的界面元素。而当谈到组件开发时，prop、event 和 slot 这些概念就必不可少了。这些强大的工具为组件之间的数据传递、通信和内容共享提供了基础。

prop：数据传递的桥梁

prop 可以被理解为组件之间的数据桥梁。它允许父组件向子组件传递信息，实现数据的单向流动。prop 的类型丰富多样，从基本类型到复杂对象，应有尽有。此外，prop 可以是必需的或可选的，还可以设置默认值。在子组件中，我们可以通过 this.propName 访问父组件传递的 prop。

代码示例：

// 父组件
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  },
  template: '<child :message="message"></child>'
}

// 子组件
export default {
  props: ['message'],
  template: '<p>{{ message }}</p>'
}

event：组件间的双向交流

event 为组件提供了相互交流的手段。子组件可以通过触发事件向父组件发送信息，实现双向通信。事件可以承载各种类型的数据，从简单的字符串到复杂的 JSON 对象。在父组件中，我们可以使用 v-on 指令监听子组件发出的事件。

代码示例：

// 子组件
export default {
  methods: {
    handleClick() {
      this.$emit('message', 'Button clicked!')
    }
  },
  template: '<button @click="handleClick">Click me</button>'
}

// 父组件
export default {
  methods: {
    handleMessage(message) {
      console.log(message)
    }
  },
  template: '<child @message="handleMessage"></child>'
}

slot：内容共享的魔法

slot 赋予了组件将内容从子组件传递到父组件的特殊能力。它允许子组件将自己的 HTML 内容插入到父组件指定的区域。在父组件中，我们可以使用标签定义一个占位符，而在子组件中，我们可以使用标签将内容注入到该占位符中。

代码示例：

// 父组件
export default {
  template: `
    <div>
      <slot name="header"></slot>
      <p>Content in parent component</p>
    </div>
  `
}

// 子组件
export default {
  template: `
    <template slot="header">
      <h1>Custom header</h1>
    </template>
  `
}