Vue3组件通信方式-学生简单理解版props父传子。子组件可以通过defineProps方法接收这些参数。define

方式一：props父传子

在Vue中，父组件可以通过v-bind指令将参数传递给子组件。

<Child :money="money" :move="move"></Child>

子组件可以通过defineProps方法接收这些参数。defineProps方法接受一个对象或字符串数组作为参数，参数名称应与父组件传递的参数名称相同。该方法返回一个props对象，可以在模板中直接使用这些参数。

let props = defineProps(['money','move'])

父组件可以通过监听子组件触发的自定义事件来响应。

    <Event2 @xxx="hade" @yyy="main"></Event2>

子组件可以通过defineEmits方法定义可以触发的事件。defineEmits方法返回一个emitter对象，通过调用emitter('事件名', 参数)来触发事件。

let emit = defineEmits(['xxx','yyy'])
const abc = ()=>{
  emit('xxx')
}
const sss = ()=> {
  emit('yyy',123)
}

在Vue 2中，所有定义在组件上的事件都是自定义事件。而在Vue 3中，DOM事件仍然是DOM事件，但如果DOM事件通过defineEmits方法被子组件接受，那么这些DOM事件也会转变为自定义事件。

全局事件总线是一种跨组件通信的方法，可以在任何组件之间传递消息。

在bus文件夹中创建一个事件发射器：

import mitt from 'mitt'
const emitter = mitt()
export default emitter

在需要发送数据的组件中，通过emitter的emit方法触发事件：

emitter.emit('foo','abc')

在需要接收数据的组件中，通过emitter的on方法监听事件：

emitter.on('foo',(e)=>{}