vue3---自定义事件

自定义事件

1. 什么是自定义事件

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

2. 自定义事件的 3 个使用步骤

在封装组件时：

① 声明自定义事件

② 触发自定义事件

在使用组件时：

③ 监听自定义事件

2.1 声明自定义事件

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

<template>
  <h2>count组件</h2>
  {{ count }}
  <button @click="add">+1</button>
</template>

export default {
    emits:[''GetCount''],
}
1
2
3
4
5
6
7
8
9

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)
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

写在最后

✨个人笔记博客✨

星月前端博客

http://blog.yhxweb.top/

 ✨原创不易，还希望各位大佬支持一下
 👍 点赞，你的认可是我创作的动力！
 ⭐️ 收藏，你的青睐是我努力的方向！
 ✏️评论，你的意见是我进步的财富！
1
2
3
4