Vue3：组件间通信-自定义事件方式

一、情景说明

自定义事件常用于：子 => 父。
注意区分：原生事件、自定义事件。

• 原生事件：
  • 事件名是特定的（click、mosueenter等等）
  • 事件对象$event: 是包含事件相关信息的对象（pageX、pageY、target、keyCode）
• 自定义事件：
  • 事件名是任意名称
  • 事件对象$event: 是调用emit时所提供的数据，可以是任意类型！！！

在我看来，通过自定义事件实现子传父的效果，就类似上一篇，通过props方式，实现子传父的效果和代码复杂度相同。

区别：
props方式，是父给子传一个函数，供子组件调用。
自定义事件方式，是父给子传一个自定义事件，供子组件调用。

二、案例

1、父组件
给子组件Child绑定事件，事件名是：send-toy

<Child @send-toy="saveToy"/>

给事件编写对应的函数：saveToy

	function saveToy(value:string){
		console.log('saveToy',value)
		toy.value = value
	}

2、子组件
声明父组件传递的事件

	const emit =  defineEmits(['send-toy'])

触发父组件提供的事件
emit(事件名,参数)

<button @click="emit('send-toy',toy)">测试</button>