插槽和父子组件通信

插槽

插槽是组件使用者在自定义组件中插入自己的 HTML 代码的占位符。插槽的语法为<slot></slot>. 组件使用者可以在自定义组件的 HTML 代码中添加多个插槽，每个插槽都可以插入不同的 HTML 代码。

例如，以下自定义组件包含两个插槽：

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

组件使用者可以将以下 HTML 代码插入这个自定义组件中：

<my-component>
  <div slot="header">这是头部</div>
  <div>这是正文</div>
  <div slot="footer">这是尾部</div>
</my-component>

最终渲染的结果将是：

<div>
  <div>这是头部</div>
  <div>这是正文</div>
  <div>这是尾部</div>
</div>

父子组件通信

父子组件通信是指组件之间传递数据。父子组件通信可以通过以下几种方式实现：

• 属性传递： 父组件可以通过属性传递数据给子组件。子组件可以通过this.props访问这些属性。
• 事件传递： 子组件可以通过触发事件来通知父组件。父组件可以通过this.$on监听这些事件。
• 函数传递： 父组件可以通过函数传递给子组件。子组件可以通过调用这些函数来操作父组件的数据。

例如，以下父组件通过属性传递数据给子组件：

<template>
  <div>
    <my-component :title="title"></my-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '这是标题'
    }
  }
}
</script>

以下子组件通过this.props访问父组件传递的数据：

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

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

总结

插槽和父子组件通信是自定义组件中两个重要的概念。插槽允许组件使用者在自定义组件中插入自己的 HTML 代码，父子组件通信允许组件之间传递数据。通过使用插槽和父子组件通信，我们可以构建出更灵活、更可复用的组件。