掌握父子组件通信，与 Vue3 和解的第 12 天

前端

2023-11-16 10:14:33

序幕

在与 Vue3 的相处中，父子组件通信是一块必须攻克的堡垒。经过漫长的 11 天征战，我们终于迎来了这一天的到来。让我们踏上这段探索之旅，与父子组件通信握手言和！

破冰之旅：了解通信方式

父子组件通信的秘诀在于理解其多种方式。Vue3 为我们提供了丰富的选择，包括：

Props： 单向数据流，从父组件传递给子组件。
Events： 单向数据流，从子组件触发，由父组件监听并响应。
Slots： 一种特殊的 HTML 标签，允许子组件将内容插入到父组件模板中的指定位置。
Provide/Inject： 一种全局事件总线，用于跨组件层级传递数据。

与 Props 共舞

Props 是父子组件通信中最基本的武器。使用 Props，父组件可以通过以下方式传递数据：

<!-- 父组件 -->
<template>
  <ChildComponent :message="greeting" />
</template>

<script>
export default {
  data() {
    return {
      greeting: '你好，孩子！'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

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

与 Events 畅聊

Events 允许子组件主动向父组件发送消息。父组件通过 @ 指令监听事件，并执行相应的处理函数：

<!-- 父组件 -->
<template>
  <ChildComponent @message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log('收到子组件消息：' + message);
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="emitMessage('我是来自子组件的消息！')">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitMessage(message) {
      this.$emit('message', message);
    }
  }
}
</script>

与 Slots 融合

Slots 是让子组件在父组件模板中定制内容的优雅方式。父组件提供一个插槽，子组件将内容填充到该插槽中：

<!-- 父组件 -->
<template>
  <ChildComponent>
    <span slot="header">我是父组件的头部</span>
    <span slot="body">我是父组件的内容</span>
  </ChildComponent>
</template>

<script>
export default {
  // ...
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot name="body"></slot>
  </div>
</template>

<script>
export default {
  // ...
}
</script>

与 Provide/Inject 相遇

Provide/Inject 是一种强大而灵活的方式，可以在组件层级之间传递数据。父组件使用 provide 方法提供数据，子组件使用 inject 方法获取数据：

<!-- 父组件 -->
<template>
  <provide>
    <ChildComponent />
  </provide>
</template>

<script>
export default {
  provide() {
    return {
      sharedData: '我是一个共享数据！'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ sharedData }}</div>
</template>

<script>
export default {
  inject: ['sharedData']
}
</script>