vue实现组件通信
父子组件通信
父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件向父组件传递数据。
父组件：
<template>
<ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return {
parentMessage: 'Hello from parent'
};
},
methods: {
handleChildEvent(data) {
console.log('Received from child:', data);
}
}
};
</script>子组件：
<template>
<div>
<p>{{ message }}</p>
<button @click="sendToParent">Send to Parent</button>
</div>
</template>
<script>
export default {
props: ['message'],
methods: {
sendToParent() {
this.$emit('childEvent', { data: 'Hello from child' });
}
}
};
</script>兄弟组件通信
通过共同的父组件作为桥梁，或者使用事件总线、Vuex 等状态管理工具。
使用事件总线：
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();组件A：
import { EventBus } from './event-bus.js';
EventBus.$emit('eventName', data);组件B：
import { EventBus } from './event-bus.js';
EventBus.$on('eventName', (data) => {
console.log(data);
});跨层级组件通信
使用 provide/inject 实现祖先组件向后代组件传递数据。
祖先组件：
export default {
provide() {
return {
sharedData: 'Shared value'
};
}
};后代组件：
export default {
inject: ['sharedData'],
mounted() {
console.log(this.sharedData);
}
};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++;
}
},
actions: {
increment({ commit }) {
commit('increment');
}
}
});组件中使用：
export default {
computed: {
count() {
return this.$store.state.count;
}
},
methods: {
increment() {
this.$store.dispatch('increment');
}
}
};使用 $refs 直接访问组件
父组件可以通过 ref 直接访问子组件的属性和方法。
父组件：
<template>
<ChildComponent ref="child" />
</template>
<script>
export default {
mounted() {
this.$refs.child.childMethod();
}
};
</script>使用 $attrs 和 $listeners
用于传递未被 props 识别的特性和事件。
子组件：
<template>
<div v-bind="$attrs" v-on="$listeners"></div>
</template>使用 v-model 实现双向绑定
自定义组件支持 v-model：
子组件：
<template>
<input :value="value" @input="$emit('input', $event.target.value)" />
</template>
<script>
export default {
props: ['value']
};
</script>父组件：
<template>
<ChildComponent v-model="message" />
</template>使用 .sync 修饰符
实现多个 props 的双向绑定：
父组件：
<ChildComponent :title.sync="pageTitle" />子组件：
this.$emit('update:title', newTitle);
