vue实现通讯

Vue 组件通讯方法

在 Vue 中，组件通讯是开发中的核心需求之一，以下是常见的几种实现方式：

父子组件通讯

Props 传递数据 父组件通过 props 向子组件传递数据：

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

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

<!-- 子组件 -->
<script>
export default {
  props: ['message']
}
</script>

$emit 触发事件 子组件通过 $emit 触发事件，父组件监听事件：

<!-- 子组件 -->
<template>
  <button @click="sendMessage">Send</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child')
    }
  }
}
</script>

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

<script>
export default {
  methods: {
    handleMessage(msg) {
      console.log(msg) // 'Hello from child'
    }
  }
}
</script>

兄弟组件通讯

Event Bus 通过一个空的 Vue 实例作为事件总线：

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

<!-- 组件A -->
<script>
import { EventBus } from './event-bus.js'
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from A')
    }
  }
}
</script>

<!-- 组件B -->
<script>
import { EventBus } from './event-bus.js'
export default {
  created() {
    EventBus.$on('message', msg => {
      console.log(msg) // 'Hello from A'
    })
  }
}
</script>

跨层级组件通讯

Provide/Inject 祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据：

<!-- 祖先组件 -->
<script>
export default {
  provide() {
    return {
      sharedData: 'Shared value'
    }
  }
}
</script>

<!-- 后代组件 -->
<script>
export default {
  inject: ['sharedData'],
  mounted() {
    console.log(this.sharedData) // 'Shared value'
  }
}
</script>

Vuex 状态管理 适用于大型应用的状态管理方案：

// 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++
    }
  }
})

<!-- 组件A -->
<script>
export default {
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}
</script>

<!-- 组件B -->
<template>
  <div>{{ $store.state.count }}</div>
</template>

其他方式

$attrs 和 $listeners 适用于多层组件传递属性和事件：

<!-- 父组件 -->
<template>
  <ChildComponent :value="value" @input="handleInput" />
</template>

<!-- 中间组件 -->
<template>
  <GrandChildComponent v-bind="$attrs" v-on="$listeners" />
</template>

$parent 和 $children 直接访问父组件或子组件实例（不推荐，破坏组件封装性）：

this.$parent.someMethod()
this.$children[0].someData