vue实现通讯
Vue 组件通讯方式
Vue 提供了多种组件间通讯的方式，适用于不同场景的需求。以下是常见的几种方法：
props / $emit 父组件通过 props 向下传递数据给子组件，子组件通过 $emit 向上触发事件并传递数据给父组件。
父组件：
<template>
<ChildComponent :message="parentMessage" @update="handleUpdate"/>
</template>
<script>
export default {
data() {
return {
parentMessage: 'Hello from parent'
}
},
methods: {
handleUpdate(val) {
console.log(val)
}
}
}
</script>子组件：
<template>
<div @click="$emit('update', 'Child data')">{{ message }}</div>
</template>
<script>
export default {
props: ['message']
}
</script>$refs 通过 ref 属性可以访问子组件实例或 DOM 元素。
<template>
<ChildComponent ref="child"/>
<button @click="callChildMethod">Call Child Method</button>
</template>
<script>
export default {
methods: {
callChildMethod() {
this.$refs.child.someMethod()
}
}
}
</script>Event Bus 创建一个中央事件总线，用于跨组件通讯。
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()组件A：
import { EventBus } from './event-bus'
EventBus.$emit('event-name', data)组件B：
import { EventBus } from './event-bus'
EventBus.$on('event-name', data => {
// handle data
})provide / inject 祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。
祖先组件：
export default {
provide() {
return {
sharedData: this.sharedValue
}
},
data() {
return {
sharedValue: 'Shared data'
}
}
}后代组件：
export default {
inject: ['sharedData'],
mounted() {
console.log(this.sharedData)
}
}Vuex 对于大型应用，使用 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++
}
}
})组件中使用：
export default {
computed: {
count() {
return this.$store.state.count
}
},
methods: {
increment() {
this.$store.commit('increment')
}
}
}$attrs / $listeners 用于跨层级传递属性和事件。
<template>
<ChildComponent v-bind="$attrs" v-on="$listeners"/>
</template>选择通讯方式的建议
- 父子组件简单通讯：props / $emit
- 跨层级组件通讯：provide / inject 或 Event Bus
- 复杂应用状态管理：Vuex
- 需要访问子组件实例：$refs
- 需要透传属性和事件：$attrs / $listeners
每种方式都有其适用场景，应根据具体需求选择最合适的方法。对于简单应用，props 和事件通常足够；对于复杂应用，Vuex 能提供更好的状态管理方案。
