请简述 Vue组件的通信（父子组件和非父子组件）？
参考回答
Vue 提供了多种方式来实现组件之间的通信，主要可以分为两种情况：父子组件通信和非父子组件通信。
1. 父子组件通信
父子组件之间的通信主要通过以下几种方式：
– Props：父组件通过 props 向子组件传递数据。
– 事件：子组件通过 $emit 向父组件发送事件，通知父组件执行某些操作。
2. 非父子组件通信
非父子组件之间的通信通常通过以下几种方式：
– Vuex：在多个组件间共享状态，适用于大型应用。
– Event Bus：通过一个中央事件总线来在不同组件之间传递事件（不推荐在 Vue 3 中使用）。
– Provide / Inject：适用于祖先和后代组件之间的通信，通常用于插件或深层嵌套的组件。
详细讲解与拓展
1. 父子组件通信
(1) 父组件传递数据给子组件 — 使用 props
props 是父组件向子组件传递数据的机制。父组件通过在子组件标签上添加属性来传递数据，而子组件通过 props 接收这些数据。
示例：
<!-- 父组件 -->
<template>
<div>
<child-component :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return {
parentMessage: 'Hello from parent'
};
}
};
</script>
<!-- 子组件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: ['message']
};
</script>
在这个例子中，父组件通过 :message="parentMessage" 将数据传递给子组件，子组件通过 props 接收并展示该数据。
(2) 子组件向父组件发送数据 — 使用 $emit
子组件可以通过 $emit 向父组件发送事件，通知父组件某些操作或传递数据。父组件通过监听事件来接收子组件发来的数据。
示例：
<!-- 父组件 -->
<template>
<div>
<child-component @send-message="receiveMessage" />
<p>{{ receivedMessage }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return {
receivedMessage: ''
};
},
methods: {
receiveMessage(message) {
this.receivedMessage = message;
}
}
};
</script>
<!-- 子组件 -->
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('send-message', 'Hello from child');
}
}
};
</script>
在这个例子中，子组件通过 this.$emit('send-message', 'Hello from child') 发送事件，父组件通过 @send-message="receiveMessage" 监听事件，并接收数据。
2. 非父子组件通信
(1) 使用 Vuex
Vuex 是 Vue 官方提供的状态管理库，适用于大型应用，帮助我们在多个组件间共享数据。Vuex 提供了中央仓库来存储应用的状态，并通过 state、mutations、actions 来管理这些状态。
示例：
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
message: 'Hello from Vuex'
},
mutations: {
setMessage(state, payload) {
state.message = payload;
}
},
actions: {
updateMessage({ commit }, payload) {
commit('setMessage', payload);
}
}
});
在组件中，我们可以通过 this.$store.state.message 获取状态，使用 this.$store.dispatch('updateMessage', 'New message') 来更新状态。
(2) 使用 Event Bus
Event Bus 是一种通过中央事件总线在非父子组件之间传递事件的方式。通过 Vue 实例创建一个全局事件总线，在需要的组件中进行事件监听和触发。
示例：
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();
然后在组件中：
// 发送事件
EventBus.emit('message', 'Hello from EventBus');
// 监听事件
EventBus.on('message', (message) => {
console.log(message);
});
但是，随着 Vue 3 的推出，Vue 官方推荐使用 Vuex 或其他状态管理方法来代替 Event Bus，因为 Event Bus 在大型应用中可能会导致维护困难。
(3) 使用 Provide / Inject
provide 和 inject 允许在祖先组件和后代组件之间进行通信，而不需要通过中间的父子组件进行传递。这种方式适合深层嵌套的组件，或者在插件开发中使用。
示例：
<!-- 祖先组件 -->
<template>
<div>
<descendant-component />
</div>
</template>
<script>
export default {
provide() {
return {
message: 'Hello from ancestor'
};
}
};
</script>
<!-- 后代组件 -->
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
inject: ['message']
};
</script>
在这个例子中，祖先组件通过 provide 向后代组件提供数据，后代组件通过 inject 获取该数据。
总结：
Vue 提供了多种方式来实现组件之间的通信，具体使用哪种方式取决于组件之间的关系和应用的复杂度。父子组件间常使用 props 和 $emit，而非父子组件间通常使用 Vuex、Event Bus 或 provide/inject。根据实际需求选择合适的通信方式，能够使代码更清晰、维护更容易。