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)
}
}
}
</script>非父子组件通信
Event Bus 创建一个全局事件总线实现跨组件通信。
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
// 发送事件的组件
EventBus.$emit('event-name', data)
// 接收事件的组件
EventBus.$on('event-name', data => {
console.log(data)
})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++
}
}
})
// 组件中使用
this.$store.commit('increment')
console.log(this.$store.state.count)其他方式
provide/inject
祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。
// 祖先组件
export default {
provide() {
return {
sharedData: 'Shared value'
}
}
}
// 后代组件
export default {
inject: ['sharedData']
}$attrs/$listeners 传递未被 props 识别的属性和事件。
<ChildComponent v-bind="$attrs" v-on="$listeners" />$parent/$children 直接访问父/子组件实例（不推荐，破坏组件封装性）。
this.$parent.someMethod()
this.$children[0].someData选择合适的方法取决于具体场景：
- 简单父子通信：props/$emit
- 跨层级通信：provide/inject 或 Event Bus
- 大型应用：Vuex
- 特殊需求：$attrs/$listeners
