自定义事件
1. 什么是自定义事件
在封装组件时,为了让组件的使用者可以监听到组件内状态的变化,此时需要用到组件的自定义事件。
2. 自定义事件的 3 个使用步骤
在封装组件时:
① 声明自定义事件
② 触发自定义事件
在使用组件时:
③ 监听自定义事件
2.1 声明自定义事件
开发者为自定义组件封装的自定义事件,必须事先在 emits 节点中声明,示例代码如下:
<template>
<h2>count组件</h2>
{{ count }}
<button @click="add">+1</button>
</template>
export default {
emits:['GetCount'],
}
2.2 触发自定义事件
在 emits 节点下声明的自定义事件,可以通过 this.$emit(‘自定义事件的名称’) 方法进行触发,示例代码如下:
<template>
<h2>count组件</h2>
{{ count }}
<button @click="add">+1</button>
</template>
methods:{
add(){
this.count++
this.$emit('GetCount',this.count)
}
}
2.3 监听自定义事件以及传参
在使用自定义的组件时,可以通过 v-on 的形式监听自定义事件。自定义事件传参,在调用 this.$emit() 方法触发自定义事件时,可以通过第 2 个参数为自定义事件传参。
示例代码如下:
<template>
<h1>app根组件</h1>
<div>
<count @GetCount="add"></count>
</div>
</template>
<script>
import count from './count.vue'
export default {
components:{
count
},
methods:{
add(e){
console.log(e)
}
}
}
</script>
写在最后
✨个人笔记博客✨
星月前端博客
✨原创不易,还希望各位大佬支持一下
👍 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向!
✏️评论,你的意见是我进步的财富!