vue3.x 自定义事件 emits

相比于 vue 2.x ，在自定义事件时 vue 3.x 提供一个 emits 选项，和现有的 props 选项类似。这个选项可以用来定义一个组件可以向其父组件触发的事件。参考 >> 官方说明

1. 自定义事件概述

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

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

在封装组件时:

声明自定义事件
触发自定义事件

在使用组件时：

监听自定义事件

>> 声明自定义事件

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

<!-- 子组件 Count -->
<script>
export default {emits: ['numchange'],
}
</script>

>> 触发自定义事件

在 emits 节点下声明的自定义事件，可以通过 this.$emit('自定义事件的名称') 方法进行触发。

<!-- 子组件 Count -->
<template><h3>Count 子组件 --- {{ num }}</h3><button type="button" class="btn btn-danger" @click="add">+1</button>
</template><script>
export default {props: ['num'],emits: ['numchange'],methods: {add() {this.$emit('numchange', this.num + 1)}}
}
</script>

>> 监听自定义事件

在使用自定义的组件时，可以通过 v-on 的形式监听自定义事件。

<!-- 父组件 App -->
<template><h3>App 根组件 --- {{ count }}</h3><button type="button" class="btn btn-primary" @click="count += 1">+1</button><count :num="count" @numchange="getNum"></count>
</template><script>
import Count from './Count.vue'
export default {data() {return {count: 0}},methods: {getNum(num) {this.count = num}},components: {Count}
}
</script>

实现效果：

vue3.x 自定义事件 emits相关推荐

html任务3 模拟滚动条,vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件...
/** * @Desc Vue3.0虚拟滚动条组件V3Scroll * @Time andy by 2021-01 * @About Q:282310962 wx:xy190310*/ props: ...
switchpreference 事件_Vue 3 自定义事件
自定义事件除了系统自带的原生 DOM 自带的事件之外,有时候我们需要用到这些自带的事件之外,我们就必须要自定义事件了. 事件名不同于组件和 prop,事件名不存在任何自动化的大小写转换.而是触发的 ...
vue2、vue3中自定义v-model的使用和区别
在我们的日常开发中,时常需要写一些自定义组件,而其中可能就会使用到v-model,v-model是Vue中的一个指令,用来实现数据的双向绑定,实现数据.视图更新,v-model是一个语法糖,,我们可以 ...
Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值注意点子组件给父组件传值父组件接受子组件的传值通过函数组件的自定义事件事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...
Vue 3 父子组件传递数据的几种通信方式 (Prop、自定义事件、v-model...)
Vue 3 官方文档 (中文):https://v3.cn.vuejs.org/guide/introduction.html 对比 Vue 2 的一些变化 v-on 的 .native 修饰符已被移 ...
手把手教你在 Vue3 中自定义指令
TienChin 项目前端是 Vue3,前端有这样的一个需求:有一些前端页面上的按钮要根据用户的权限来决定是否展示出来,如果用户具备相应的权限,那么就展示对应的按钮:如果用户不具备对应的权限,那么按钮 ...
vue3的组件事件和defineEmits
文章目录 1. 事件基础示例 Blog.vue BlogPost.vue 2. 触发与监听事件 2.1 触发事件 2.2 监听事件 3. 事件参数 3.1 示例1 Blog.vue BlogPost ...
Vue组件绑定自定义事件
Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...
cocos2d-js 自定义事件监听派发
熟悉js的dom事件或者flash事件的,基本都能立马明白cc.eventManager的用法. cc.eventManager有两种注册监听器的方式,一种是原生事件,例如 cc.eventManag ...

vue3.x 自定义事件 emits

1. 自定义事件概述

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

vue3.x 自定义事件 emits相关推荐

最新文章

热门文章