Vue 组件通信方式：5 种有效方法

2024-02-21 10:27:45

Vue 组件通信方式：5 种有效方法

在 Vue 中，组件通信是实现组件之间数据共享和交互的关键。本文将介绍 5 种 Vue 组件通信方式，包括全局数据管理者、兄弟组件通信、插槽、事件总线和 props，以及 Vuex、watch 等其他方法，帮助您在 Vue 应用中轻松实现组件间的通信。

1. 全局数据管理者

全局数据管理者是一种常见且有效的 Vue 组件通信方式。您可以使用 Vuex 或其他状态管理工具，创建一个共享的全局数据存储。然后，组件可以通过访问这个存储来获取和修改数据，从而实现通信。

2. 兄弟组件通信

兄弟组件是指在同一父组件下、彼此平级的组件。兄弟组件之间的通信可以使用 $parent 或 $root 属性来实现。

<template>
  <div>
    <button @click="$parent.incrementCounter()">Increment Counter</button>
  </div>
</template>

<script>
export default {
  methods: {
    incrementCounter() {
      this.$parent.counter++;
    },
  },
};
</script>

3. 插槽

插槽是一种将内容从父组件传递给子组件的方式。子组件可以通过 <slot> 标签来接收父组件传递的内容。

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  render(h) {
    return h('div', this.$slots.default);
  },
};
</script>

4. 事件总线

事件总线是一种 Vue 插件，它允许您在组件之间发送和接收事件。组件可以使用 $emit 方法来发送事件，而其他组件可以使用 $on 方法来监听事件。

<template>
  <div>
    <button @click="$emit('increment-counter')">Increment Counter</button>
  </div>
</template>

<script>
import Vue from 'vue';
import EventBus from './EventBus.js';

export default {
  name: 'ChildComponent',
  created() {
    EventBus.$on('increment-counter', this.incrementCounter);
  },
  beforeDestroy() {
    EventBus.$off('increment-counter', this.incrementCounter);
  },
  methods: {
    incrementCounter() {
      this.$parent.counter++;
    },
  },
};
</script>

5. Props

Props 是 Vue 中一种最常用的组件通信方式。父组件可以使用 props 属性来向子组件传递数据。子组件可以通过 props 属性来接收父组件传递的数据。

<template>
  <div>
    <child-component :counter="counter"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: { ChildComponent },
  data() {
    return {
      counter: 0,
    };
  },
};
</script>