vue实现组件通信

Vue 组件通信方法

Vue 提供了多种方式实现组件间的通信，适用于不同场景。以下是常见的方法：

Props 和 Events

父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件通知父组件。

父组件模板：

<template>
  <ChildComponent :message="parentMessage" @update="handleUpdate" />
</template>

子组件模板：

<template>
  <button @click="$emit('update', newValue)">Update</button>
</template>
<script>
export default {
  props: ['message']
}
</script>

$refs

通过 ref 属性获取子组件实例，直接调用其方法或访问数据。

父组件：

<template>
  <ChildComponent ref="child" />
</template>
<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    }
  }
}
</script>

Event Bus

创建一个中央事件总线，用于任意组件间的通信。

创建 event bus：

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

组件 A 发送事件：

EventBus.$emit('event-name', data);

组件 B 接收事件：

EventBus.$on('event-name', data => {
  // 处理数据
});

Vuex 状态管理

对于复杂应用，使用 Vuex 集中管理状态。

store 定义：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
});

组件中使用：

this.$store.commit('increment');
console.log(this.$store.state.count);

provide/inject

祖先组件通过 provide 提供数据，后代组件通过 inject 接收数据。

祖先组件：

export default {
  provide() {
    return {
      theme: 'dark'
    }
  }
}

后代组件：

export default {
  inject: ['theme']
}

$attrs 和 $listeners

传递未被识别为 props 的属性和事件。

父组件：

<ChildComponent v-bind="$attrs" v-on="$listeners" />

slot 插槽

通过插槽内容进行通信。

父组件：

<ChildComponent>
  <template v-slot:default="slotProps">
    {{ slotProps.user.name }}
  </template>
</ChildComponent>

子组件：

<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

每种方法适用于不同场景，简单父子通信使用 props/events，跨层级通信使用 provide/inject 或 Vuex，全局事件使用 Event Bus，复杂状态管理使用 Vuex。