请简述 Vue组件的通信（父子组件和非父子组件）？

参考答案：

Vue.js 提供了几种方式来实现组件之间的通信，这些方式适用于不同的场景，包括父子组件之间的通信和非父子组件之间的通信。

父子组件通信：

Props 向下传递：这是 Vue.js 中最常用的父子组件通信方式。父组件通过 props 将数据传递给子组件。子组件接收到 props 后，可以作为自身的数据使用。

// 父组件
<template>
  <child-component :msg="parentMsg"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMsg: 'Hello from parent'
    }
  }
}
</script>

// 子组件
<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  props: ['msg']
}
</script>

事件向上传递：子组件可以通过触发事件向父组件发送消息。父组件在子组件标签上监听这个事件，并在事件处理函数中获取子组件传递的数据。

// 父组件
<template>
  <child-component @childEvent="handleEvent"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(payload) {
      console.log('Received message from child:', payload);
    }
  }
}
</script>

// 子组件
<template>
  <button @click="notifyParent">Click me</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('childEvent', 'Hello from child');
    }
  }
}
</script>

非父子组件通信：

Event Bus：Event Bus 是一个全局的 Vue 实例，用于在组件之间传递事件。组件通过 $emit 触发事件，其他组件通过 $on 监听这个事件。

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// 组件 A
import { EventBus } from './EventBus.js';

EventBus.$emit('customEvent', 'Hello from component A');

// 组件 B
import { EventBus } from './EventBus.js';

EventBus.$on('customEvent', (message) => {
  console.log('Received message from component A:', message);
});

Vuex：Vuex 是 Vue.js 的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 适用于大型应用，当需要在多个组件之间共享状态时，Vuex 是一个很好的选择。
Provide/Inject：provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐用于普通应用程序代码。provide 和 inject 绑定在一起工作，并允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

这些就是 Vue 组件通信的一些常用方式。具体的选择取决于你的应用需求和你对 Vue 的理解。