简述 Vue父子組件和非父子組件的通信

Vue组件之间的通信可以分为父子组件通信和非父子组件通信两大类。下面将分别进行详细的解释：

父子组件通信

1. 父传子

方式：通过props属性进行传递。
步骤：
1. 在父组件中定义要传递的数据。
2. 在父组件的模板中，使用子组件标签并动态绑定父组件的数据到子组件的props上。
3. 在子组件中，通过props选项声明要接收的数据，并在模板中使用这些数据。

示例代码：

父组件：

<template><child-component :message="parentMessage"></child-component>
</template><script>
import ChildComponent from './ChildComponent.vue'export default {data() {return {parentMessage: 'Hello from Parent'}},components: {ChildComponent}
}
</script>

子组件：

<template><div>{{ message }}</div>
</template><script>
export default {props: ['message']
}
</script>

2. 子传父

方式：通过自定义事件进行传递。
步骤：
1. 在子组件中，当需要向父组件传递数据时，使用this.$emit('eventName', payload)触发一个自定义事件。
2. 在父组件中，使用@eventName或v-on:eventName监听子组件的自定义事件，并在事件处理函数中接收数据。

示例代码：

子组件：

<template><button @click="notifyParent">Notify Parent</button>
</template><script>
export default {methods: {notifyParent() {this.$emit('childEvent', 'Hello from Child');}}
}
</script>

父组件：

<template><child-component @childEvent="handleChildEvent"></child-component>
</template><script>
import ChildComponent from './ChildComponent.vue'export default {methods: {handleChildEvent(message) {console.log(message); // 输出：'Hello from Child'}},components: {ChildComponent}
}
</script>

非父子组件通信

1. 事件总线（Event Bus）

方式：创建一个新的Vue实例作为事件中心，用于在任意组件之间传递事件和消息。
步骤：
1. 创建一个新的Vue实例作为事件总线。
2. 在需要发送消息的组件中，使用EventBus.$emit('eventName', payload)发送消息。
3. 在需要接收消息的组件中，使用EventBus.$on('eventName', callback)监听消息。

2. Vuex

方式：Vuex是Vue.js的状态管理模式和库，用于集中存储和管理组件的状态。
步骤：
1. 安装和配置Vuex。
2. 在Vuex的store中定义state、mutations、actions等。
3. 在组件中，通过this.$store.state访问状态，通过this.$store.commit提交mutation，或者通过this.$store.dispatch分发action。

3. provide/inject