Vue学习：16.组件通信

组件通信就是指组件之间的数据传递。由于组件的数据是独立的，无法直接访问其他组件的数据，所以想要使用其他组件数据必须通过 组件通信！

在Vue.js中，组件之间的通信可以通过多种方式实现，包括 props、事件、$emit / $on、Vuex 状态管理等。

要讲组件通信首先来说一下组件关系。

组件关系

在Vue.js中，组件之间的关系可以分为父子关系、兄弟关系和祖先后代关系。

如图所示，A与B、C便是父子关系；B和C便是兄弟关系；A和D事祖先后代关系。

其实可以更为简略的划分为：父子关系、非父子关系。

组件通信分类

而根据组件之间的关系，可以将组件通信分类为以下几种：

1. 父子组件通信

• Props / $emit: 父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件，向父组件传递数据。
• $refs: 父组件可以通过 ref 属性引用子组件的实例，直接调用子组件的方法或访问子组件的数据。

2. 兄弟组件通信

• 事件总线(Event Bus): 通过一个空的 Vue 实例作为中央事件总线，兄弟组件通过该实例进行事件的触发和监听。
• Vuex: 使用 Vuex 进行状态管理，兄弟组件共享状态。

3. 祖先后代组件通信

• provide / inject: 祖先组件通过 provide 提供数据或方法，后代组件通过 inject 注入数据或方法，实现祖先后代之间的通信。

4. 非直接关系组件通信

有时候，组件之间的关系并不是直接的父子、兄弟或祖先后代关系，但它们仍然需要进行通信。

• 事件总线(Event Bus): 同样可以用于非直接关系组件之间的通信。
• Vuex: Vuex 可以管理全局状态，任何组件都可以通过 Vuex 进行状态的读取和修改。

5. 动态组件通信

当使用动态组件时，例如通过 component 元素动态渲染不同的组件，它们之间的通信方式可以根据具体情况选择以上提到的通信方式。

实例：父传子、子传父

实现功能

实现父组件向子组件传递数据以及让子组件将数据传递回父组件。

思路

代码

父传子

父组件通过给子组件以添加属性的方式传值，例子中【:message="parentMessage"】将父组件的数据传递给了子组件。子组件内部通过声明props: ['message']来接收父组件传递过来的数据，并在模板中使用{{ message }}来显示这个数据。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

子传父

子组件向父组件传递数据通常通过触发事件来实现。子组件可以使用 $emit 方法触发一个自定义事件，并将需要传递的数据作为参数传递给父组件。父组件可以监听这个自定义事件，并在事件处理函数中获取子组件传递过来的数据。

<!-- ChildComponent.vue -->
<template>
  <button @click="sendMessageToParent">Send Message to Parent</button>
</template>

<script>
export default {
  methods: {
    sendMessageToParent() {
      // 触发自定义事件，并传递数据给父组件
      this.$emit('messageToParent', 'Hello from child');
    }
  }
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent @messageToParent="receiveMessageFromChild" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveMessageFromChild(message) {
      // 在这里处理从子组件传递过来的数据
      console.log(message); // 输出: "Hello from child"
    }
  }
}
</script>