vue实现数据互通
在Vue中实现组件间的数据互通有多种方式，以下为常见方法：
使用Props和自定义事件
父组件通过props向子组件传递数据，子组件通过$emit触发自定义事件向父组件传递数据。
父组件模板：
<template>
<ChildComponent :message="parentMsg" @update="handleUpdate"/>
</template>子组件模板：
<template>
<button @click="$emit('update', newValue)">更新数据</button>
</template>
<script>
export default {
props: ['message'],
data() {
return { newValue: 'Updated' }
}
}
</script>使用Vuex状态管理
适合中大型应用中的全局状态共享。
Store配置示例：
import Vuex from 'vuex'
const store = new Vuex.Store({
state: { count: 0 },
mutations: {
increment(state) {
state.count++
}
}
})组件中使用：
this.$store.commit('increment')
console.log(this.$store.state.count)使用Event Bus
创建全局事件总线实现任意组件间通信。
创建Event Bus：
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()发送事件：
EventBus.$emit('message-event', data)接收事件：
EventBus.$on('message-event', data => {
console.log(data)
})使用provide/inject
祖先组件向深层后代组件直接注入依赖。
祖先组件：
export default {
provide() {
return { theme: this.theme }
}
}后代组件：
export default {
inject: ['theme']
}使用$refs
父组件直接访问子组件实例。
父组件：
<template>
<ChildComponent ref="child"/>
</template>
<script>
export default {
mounted() {
this.$refs.child.methodName()
}
}
</script>根据应用规模和组件关系选择合适方法，小型项目可用Props/Event或Event Bus，复杂状态管理推荐Vuex。
