vue实现父子组件通信
Vue 父子组件通信方法
Props 传递数据
父组件通过 props 向子组件传递数据。在子组件中定义 props 接收父组件传递的值。
父组件模板：
<template>
<ChildComponent :message="parentMessage" />
</template>
<script>
export default {
data() {
return {
parentMessage: 'Hello from parent'
}
}
}
</script>子组件接收：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message']
}
</script>自定义事件 ($emit)
子组件通过 $emit 触发事件，父组件通过 v-on 监听事件并处理。
子组件触发事件：
<template>
<button @click="sendMessage">Send</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message-sent', 'Child data')
}
}
}
</script>父组件监听：
<template>
<ChildComponent @message-sent="handleMessage" />
</template>
<script>
export default {
methods: {
handleMessage(data) {
console.log(data) // 'Child data'
}
}
}
</script>v-model 双向绑定
实现父子组件数据的双向绑定，本质是 props 和 $emit 的语法糖。
子组件定义：
<template>
<input :value="value" @input="$emit('input', $event.target.value)" />
</template>
<script>
export default {
props: ['value']
}
</script>父组件使用：
<template>
<ChildComponent v-model="parentData" />
</template>
<script>
export default {
data() {
return {
parentData: ''
}
}
}
</script>$refs 访问子组件
父组件通过 ref 属性直接访问子组件实例和方法。
父组件模板：
<template>
<ChildComponent ref="child" />
<button @click="callChildMethod">Call Child</button>
</template>
<script>
export default {
methods: {
callChildMethod() {
this.$refs.child.childMethod()
}
}
}
</script>子组件定义方法：
<script>
export default {
methods: {
childMethod() {
console.log('Child method called')
}
}
}
</script>$parent 和 $children
子组件通过 $parent 访问父组件实例，父组件通过 $children 访问子组件实例（不推荐，耦合性高）。
子组件访问父组件：
<script>
export default {
methods: {
callParentMethod() {
this.$parent.parentMethod()
}
}
}
</script>Provide/Inject
祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据（适合跨层级通信）。
祖先组件：
<script>
export default {
provide() {
return {
sharedData: 'Shared value'
}
}
}
</script>后代组件：
<script>
export default {
inject: ['sharedData'],
created() {
console.log(this.sharedData) // 'Shared value'
}
}
</script>Event Bus
通过全局事件总线实现任意组件间通信，适合非父子关系组件。
创建事件总线：
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()组件A发送事件：
import { EventBus } from './eventBus'
EventBus.$emit('event-name', data)组件B接收事件：
import { EventBus } from './eventBus'
EventBus.$on('event-name', data => {
console.log(data)
})Vuex 状态管理
对于复杂应用，使用 Vuex 集中管理状态，实现组件间共享数据。
store 定义：
// 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++
}
}
})组件中使用：
// 触发 mutation
this.$store.commit('increment')
// 获取状态
this.$store.state.count方法选择建议
- 简单父子通信：优先使用
props和$emit - 需要双向绑定：使用
v-model - 跨层级通信：考虑
provide/inject或 Vuex - 全局事件：使用 Event Bus
- 复杂状态管理：采用 Vuex
每种方法都有适用场景，根据具体需求选择最合适的方案。
