vue3_硅谷甄选_003_子组件通过自定义事件给父组件传递参数

事件 = 原生的DOM事件 + 自定义事件

自定义事件

原生的dom事件

上述就是原生的dom事件；

原生的dom事件会向事件的回调，注入事件对象event。

event就是事件对象，身上会包含很多东西，比如鼠标的位置，键盘码，以及阻止事件传播；

原生dom事件 - 给回调传递多个参数

结果如下所示：

自定义事件 - vue3和vue2的区别

子组件给父组件传递数据。

先写一个子组件，如上所示；

父组件当中引入子组件；

知识点1

<Event1 @click="handler2"></Event1>

vue2框架当中上述写法，就是自定义事件；可以通过.native修饰符变为原生DOM事件；

vue3框架当中上述写法，就是原生DOM事件；

vue3是比较好记忆的。

原生的DOM事件，不管是放在组件的普通标签身上，还是组件的组件标签身上，都是原生的DOM事件；

我给子组件绑定了原生的DOM事件，那么到底是绑定在了什么地方呢？实际是绑定在了子组件的根标签上的。

子组件里头除了根标签之外，还有普通标签，还有孙子组件标签，不管点击谁，都会触发事件的；

自定义事件 - 儿子给父亲传递事件

定义子组件样式

这是子组件；

父组件当中，给子组件绑定，自定义事件；

在父亲组件当中，定义事件回调；

vue2怎么触发自定义事件

通过组件实例的$emit方法触发自定义事件；

vue3怎么触发自定义事件

vue3比较尴尬；不能通过组件实例的emit方法来触发；

因为vue3当中setup这种写法是没有this的；也就是你拿不到组件实例；

defineEmits方法

利用defineEmits方法返回函数自定义事件

difineEmits方法不需要引入直接使用

发现defineEmits(['xxx'])方法的返回值，就是一个箭头函数；

这个箭头函数当中包括：event，这是自定义事件的名字；包括...args，这是注入的参数；

---

这就是真实的写法；

父组件接收数据

总结

在儿子组件当中，触发事件；

事件的回调函数当中，可以通过defineEmits方法触发自定义事件

自定义事件，这就可以传递给父亲组件了；

父亲组件当中，儿子组件标签上绑定了自定义事件了；

父亲组件当中，是有自定义事件的回调函数的；

其实就是这么一个过程；

注意：自定义事件使用原生DOM事件的名字

如果你在子组件内部，defineEmits定义自定义事件的时候，也用了click。

那么click事件，就不再是什么原生DOM事件了，而是自定义事件了。如下所示：