vue实现消息通讯

Vue 实现消息通讯的方法

Vue 中实现组件间通讯有多种方式，适用于不同场景。以下是常见的几种方法：

Props 和 Events

父组件通过 props 向下传递数据给子组件，子组件通过 $emit 触发事件向父组件发送消息。

父组件模板：

<child-component :message="parentMessage" @update="handleUpdate"></child-component>

子组件脚本：

props: ['message'],
methods: {
  sendMessage() {
    this.$emit('update', 'new message')
  }
}

Event Bus

创建一个中央事件总线，用于任意组件间的通讯。适合非父子关系的组件。

创建 event bus：

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

发送事件：

EventBus.$emit('event-name', payload)

接收事件：

EventBus.$on('event-name', payload => {
  // 处理事件
})

Vuex 状态管理

对于大型应用，使用 Vuex 集中管理状态并提供可预测的状态变更。

store 定义：

const store = new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  }
})

组件中使用：

this.$store.commit('setMessage', 'new message')

Provide/Inject

祖先组件通过 provide 提供数据，后代组件通过 inject 接收。适合深层嵌套组件。

祖先组件：

provide() {
  return {
    message: this.message
  }
}

后代组件：

inject: ['message']

$attrs 和 $listeners

传递未被 props 识别的属性和事件到内部组件。适合创建高阶组件。

父组件：

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

$refs

直接访问子组件实例。适用于需要直接调用子组件方法的场景。

父组件：

this.$refs.childComponent.methodName()

$parent 和 $children

通过父链或子链直接访问组件实例。不推荐频繁使用，可能导致组件耦合。

v-model 语法糖

实现父子组件的双向绑定。

子组件：

model: {
  prop: 'value',
  event: 'change'
},
props: ['value'],
methods: {
  updateValue(newValue) {
    this.$emit('change', newValue)
  }
}

作用域插槽

父组件通过插槽访问子组件数据。

子组件：

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

父组件：

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

选择合适的方法取决于具体场景：

• 简单父子通讯使用 props 和 events
• 跨层级组件使用 provide/inject 或 Vuex
• 全局事件使用 Event Bus
• 复杂状态管理使用 Vuex
• 需要双向绑定时使用 v-model
• 需要灵活内容分发时使用作用域插槽