Vue3父子组件兄弟组件传值技巧及全面解析

2023-12-15 07:38:28

Vue 3 组件通信指南：父子组件和兄弟组件的数据传递

在 Vue.js 框架中，组件是构建 UI 界面的基石。为了构建复杂且交互丰富的应用程序，组件之间的有效通信至关重要。Vue 3 引入了新的 API，使组件之间的值传递更加灵活和直观。本文将深入探讨 Vue 3 中父子组件和兄弟组件之间的数据传递技术，包括 Prop、Emit 和 EventBus，并提供丰富的代码示例。

父子组件通信

Prop

Prop 是父子组件间传递数据的机制。在父组件中，使用 props 属性声明要传递给子组件的数据，而子组件通过 props 选项接收父组件的数据。

代码示例:

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

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

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

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

在上面的示例中，父组件将 message 数据传递给子组件，子组件接收并显示此数据。

Emit

Emit 是子组件向父组件传递数据的机制。在子组件中，使用 emit 方法向父组件发出事件，而在父组件中，使用 on 事件监听器监听子组件发出的事件。

代码示例:

<!-- 子组件 -->
<template>
  <button @click="emitMessage">发送消息</button>
</template>

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

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

<script>
export default {
  methods: {
    onMessage(message) {
      console.log(message) // Hello, world!
    }
  }
}
</script>

在上面的示例中，子组件发出 message 事件，父组件监听该事件并打印消息。

兄弟组件通信

EventBus

EventBus 是一个全局事件总线，用于在兄弟组件之间传递数据。在 Vue 3 中，可以使用 mitt 库创建 EventBus。

代码示例:

import mitt from 'mitt'

const eventBus = mitt()

创建 EventBus 后，兄弟组件可以使用它来传递数据。

// 组件 A
import mitt from 'mitt'

const eventBus = mitt()

eventBus.emit('message', 'Hello, world!')

// 组件 B
import mitt from 'mitt'

const eventBus = mitt()

eventBus.on('message', (message) => {
  console.log(message) // Hello, world!
})