vue 自定义事件

目录

一、什么是自定义事件

二、自定义事件的 3 个使用步骤

2.1 声明自定义事件

2.2 触发自定义事件

2.3 监听自定义事件 

 3、自定义事件传参

总结

一、什么是自定义事件

          在封装组件时,为了让组件的使用者可以监听到组件内状态的变化,此时需要用到组件的自定义事件

 

二、自定义事件的 3 个使用步骤

在封装组件时:

声明自定义事件

触发自定义事件 在使用组件时:

监听自定义事件


2.1 声明自定义事件

开发者为自定义组件封装的自定义事件,必须事先在 emits 节点中声明,示例代码如下:


2.2 触发自定义事件

emits 节点下声明的自定义事件,可以通过 this.$emit('自定义事件的名称') 方法进行触发,示例代码如下:


2.3 监听自定义事件 

 在使用自定义的组件时,可以通过 v-on 的形式监听自定义事件。示例代码如下


 3、自定义事件传参

         在调用 this.$emit() 方法触发自定义事件时,可以通过第 2 个参数为自定义事件传参,示例代码如下:

 


总结

 以上就是关于VUE自定义事件的讲解。