-
一文讲清vue中自定义事件监听和分发
2021-02-17 19:38:45在Vue中我们可以使用下面的代码来实现组件中自定义事件的监听和分发: //在父组件中 mounted () { //给Header组件添加addTodo事件,通过$on监听 this.$on('addTodo', this.addTodo) } methods: { addTodo (todo)...自定义全局事件总线
事件监听和组件传值方式
在Vue中我们可以使用下面的代码来实现组件中自定义事件的监听和分发:
//在父组件中 mounted () { //给Header组件添加addTodo事件,通过$on监听 this.$on('addTodo', this.addTodo) } methods: { addTodo (todo) { this.todos.unshift(todo) }, } //Header组件中 methods: { add () { ... //分发事件,并且传入数据 this.$emit('addTodo', todo) ... } } //在子组件中调用add方法就会触发事件分发,那么父组件就会监听到,就能够执行addTodo方法
以上就是我们熟悉的用法。这里我们可以讨论两个问题:
- 通过 on 和eimt能否实现兄弟组件之间的传值?
- 如何自己实现事件监听、分发和移除呢?
首先、on 和 emit不能直接实现兄弟组件之间传值。
一般兄弟组件之间传值有多种方式,我使用过的方式有三种:
1.通过子组件传递给父组件,然后通过父组件传递给另外一个组件
这种你很简单应该都会吧
2.通过eventBus的方式
单独建立一个eventBus.js文件,内如如下:import Vue from 'vue' export default new Vue
假如父组件如下:
<template> <cpn-a></cpn-a> <cpn-b></cpn-b> </template>
子组件cpn-a
<template> <div class="cpn-a"> <div>{{btext}}</div> </div> </template> <script> import eventBus from './event.js' export default { name: 'cpn-a', data () { return { 'btext':"我是a组件内容" } }, created:function(){ this.bbtn(); }, methods:{ bbtn:function(){ eventBus .$on("myFun",(message)=>{ //注意这里应该使用箭头函数 否侧this指向有问题 this.btext = message }) } } } </script>
子组件cpn-b
<template> <div class="cpn-b"> <button @click="abtn">A按钮</button> </div> </template> <script> import eventBus from './event.js' export default { name: 'cpn-b', data () { return { ‘msg':"我是组件b" } }, methods:{ abtn:function(){ eventBus.$emit("myFun",this.msg) //$emit这个方法会触发一个事件 } } } </script>
3.使用PubSub.js库
这种方式和第二种差不多,只不过使用的是第三方的库,就不写代码演示了,大家可以去找官方网站案例。探讨如何自定义全局事件总线
上面第二种方式为什么能够实现兄弟组件之间的传值呢?
首先,我们需要知道一个vue组件是谁的实例对象。是Vue的实例对象吗?
我们在一个组件中将this打印输出看一下:
通过输出信息我们可以看出来,vue组件并非是Vue的实例对象,而是VueComponent实例对象,另外,我们还发现了一件有趣的事情:
VueComponent实例对象的隐士原型对象指向了Vue实例对象。而我们知道Vue实例对象的隐式原型对象上有on和emit方法。那么这两个方法就可以实现事件的监听和分发。
画个图来理一下父子组件之间的关系:
因为每个组件都会创建属于自己的VueComponent实例对象,所以兄弟组件之间是不能通过on emit方法进行事件监听和分发的,父子组件可以使用的原因是,父组件中包含了子组件,可以通过名称遍历到子组件实例,然后找到对应的事件方法,而兄弟组件之间是没有包含关系的所有不能直接使用on 和emit方法。那么,有什么办法可以让on和emit方法在全局实现事件监听和分发呢?
通过上面的第二种方式,即通过eventBus的方式来实现兄弟组件之间传值。这个文件返回了一个Vue构造函数的实例对象,而Vue构造函数的实例对象是可以用使用到Vue原型上的方法的,也就是可以使用到on和emit方法,从而巧妙的将这些方法的实例统一成一个,也就是说你在每个组件中使用的on和emit方法都是这一个实例对象下面的,保证了完整性,从而可以实现兄弟组件之间的传值。
我感觉这个方式要多创建一个文件,其实比较麻烦,能不能也使用this这种方式直接使用呢?
有的,我们可以直接在main.js中给Vue的原型上挂载一个公共方法new Vue({ beforeCreate () { //我们可以给Vue的原型上添加一个属性$globalEventBus //让这个属性等于Vue的实例对象 Vue.prototype.$globalEventBus = this }, components: { App }, template: '<App/>' }).$mount('#app')
使用方式:
在子组件中就可以使用methods:{ this.$globalEventBus.emit('addTodo',todos) }
那么,其实这些方式的实现都跟原型链有关,只要原型链掌握的好,理解起来很轻松。
各位好哥哥好姐姐,点个赞吧
-
vue中自定义事件回调函数传参
2018-08-25 02:18:23我们知道父子组件中,子组件一般是通过$emit(自定义事件名称,数据)的形式来将数据传给父组件 父组件通过回调函数处理子组件传过来的数据, 例如: 子组件内: this.$emit(change,data) 父组件内 <...我们知道父子组件中,子组件一般是通过$emit(自定义事件名称,数据)的形式来将数据传给父组件
父组件通过回调函数处理子组件传过来的数据,
例如:
子组件内:
this.$emit(change,data)
父组件内
<json-editor @change="onSettingChange" ></json-editor>
我们都知道子组件会将数据自动作为参数传给父组件的回调函数:例如父组件我们会这样写
<json-editor @change="onSettingChange()"></json-editor>
在父组件的方法内写:
onSettingChange:function (data){
//处理子组件传来的数据
}
可是如果我们想在回调函数传其他的参数值怎么传呢?
有一个方法就是:
<json-editor @change="onSettingChange(arg,arguments)"></json-editor>
这样子组件传来的参数值可以通过arguments这个数组读取,多余的参数则按照一般的方式传值即可:
onSettingChange:function (arg,data){
里面的arg是一般的传值,
data[0]里面是子组件传过来的数据
}
-
Vue的自定义事件
2020-10-30 23:06:07Vue的自定义事件子组件中,选择click或其他原生事件来封装父组件中,使用v-on/@绑定事件监听器 自定义事件是自定义组件才有的。 自定义事件其实就是封装DOM原生事件,如何封装?——就是在原生事件的回调中发射...自定义事件是自定义组件才有的。
自定义事件其实就是封装DOM原生事件,如何封装?——就是在原生事件的回调中发射(emit)一个自定义事件。
下面就是具体操作:子组件中,选择click或其他原生事件来封装
// 自定义组件boringButton.vue
<template> <button v-on:click="incrementHandler">{{ counter }}</button> </template> <script> export default { name: 'boring-button', methods: { incrementHandler: function () { this.counter += 1; this.$emit('increment'); } } } </script>
父组件中,使用v-on/@绑定事件监听器
// 引用boringButton.vue的文件
<template> <!-- 注意increment的大小写和emit的保持一致,要一毛一样才行 --> <boringButton @increment='incrementTotal'></boringButton> </template> <script> methods: { incrementTotal: function () { console.log('I increment the boringButton!'); } } </script>
-
Vue——自定义事件
2021-01-12 16:28:29 由于Vue中的其他组件无法使用到Vue实例中的数据,可以通过自定义事件完成对Vue实例中数据的一些操作,具体图解如下: 其中,由于Vue中具有的数据双向绑定的特性,使得前端可以作为组件与实例的桥梁,利用自定义...Vue——自定义事件
由于Vue中的其他组件无法使用到Vue实例中的数据,可以通过自定义事件完成对Vue实例中数据的一些操作,具体图解如下:
其中,由于Vue中具有的数据双向绑定的特性,使得前端可以作为组件与实例的桥梁,利用自定义事件实现一些功能。
示例代码:
//前端 <div id="app" > <todo> <todo-title slot="todo-title" :title="title"></todo-title> <todo-items slot="todo-items" v-for="(item,index) in items" :item="item" :index="index" :key="index" v-on:remove="removeItems(index)"></todo-items> </todo> </div>
//Vue <!--导入Vue--> <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> <script type="text/javascript"> //slot:插槽 Vue.component("todo",{ template: '<div>\ <slot name="todo-title"></slot>\ <ul>\ <slot name="todo-items"></slot>\ </ul>\ </div>' }); Vue.component("todo-title",{ props:['title'], template: '<div>{{title}}</div>' }); Vue.component("todo-items",{ props: ['item','index'], //记得button绑定事件 template:'<li>{{index}}---{{item}}<button @click="remove">删除</button></li>', methods:{ remove:function(index){ this.$emit('remove',index); } } }); var vm = new Vue({ el:'#app', data: { title: "书籍列表", items:['Java','Math','English'] }, //methods不要放进data里!! methods: { removeItems:function (index){ console.log("删除了"+this.items[index]); this.items.splice(index,1); } } }); </script>
关于V-bind key="":
} } });
**关于V-bind key="":** >一句话,**key的作用主要是为了高效的更新虚拟DOM**。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们。
-
vue 的自定义事件
2017-03-21 10:47:00vue的自定义事件非常有趣,大意为子组件使用了一个事件,比如click然后产生了一个效果,这样的效果便可以为自定义事件了。然后将这样的效果命名放入父组件中,当做一个事件来触发,每当这样的效果发生一次时,这样父... -
vue——自定义事件
2019-08-28 23:28:12vue中自定义的事件,不同于组件和props属性,事件名没有任何的大小写转换,触发的事件必须完全匹配这个事件所用的名称,所以在使用this.$emit('clickA',data)时,clickA必须与定义的事件名一致 当参数为对象时,父... -
vue 1.0自定义事件
2019-01-02 14:09:46Vue实例实现了一个自定义事件接口,用于在组件树中通信,这个事件系统独立于原生DOM事件。 使用 $on() 监听事件 使用 $emit()在它上面触发事件 使用 $dispatch()派发事件事件沿着父链冒泡 使用 $broadcast... -
vue event 自定义事件
2018-05-10 15:07:37子组件要把数据传递给父级 依靠自定义事件 自定义事件 监听$on(eventName) 触发$emit(eventName) 基本使用方法如下 使用app.$on('text',function(){})来自定义一个事件,实例中我使用click点击事件来触发addn... -
vue绑定自定义事件--点赞功能
2020-04-20 16:56:17我们提到过,不能在子组件中直接修改父组件传来的 prop 数据。 如果想要修改父组件中的原数据要...给子组件 Article.vue 绑定自定义事件: 在 App.vue 中用 v-on:upVote=“handleLikes(article)” 给 Article.vue ... -
62Vue - 自定义事件(使用自定义事件的表单输入组件)
2019-07-29 11:21:49自定义事件也可以用来创建自定义的表单输入组件,使用 v-model来进行数据双向绑定。牢记: <input v-model="something"> 仅仅是一个语法糖: <input v-bind:value="something" v-on:input="something = $... -
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020-11-20 16:55:52本文实例讲述了vue使用自定义事件的表单输入组件用法。分享给大家供大家参考,具体如下: 自定义事件可以用来创建自定义的表单输入组件,使用 v-model 来进行数据双向绑定。 v-model的实现原理 : <input v-model... -
vue自定义事件
2018-10-19 11:36:0301 vue中自定义指令 vue指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) 02 标准浏览器... -
vue-自定义事件之—— 子组件修改父组件的值
2019-03-07 15:47:44vue-自定义事件之—— 子组件修改父组件的值 如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-... -
vue中自定义标签给绑定事件函数传值
2020-09-21 17:33:53我自定义了一个标签menu_item ``` Vue.component('menu_item',{ props:['todo'], //template:'()">{{todo.text}}</li>', template:'()">{{todo.text}}</li>', }) var menu = new Vue({ el:"#vue_... -
vue2自定义事件之$emit
2017-04-25 16:58:00父组件: API上的解释不多: ... vm.$emit( event, […args] ) ...触发当前实例上的事件。附加参数都会传给监听器回调。 Source 我们可以从组件的api中查看这个用法。 数据在组件中是单向... -
Vue 自定义事件
2019-06-02 21:43:10前面的话 我们已经知道,从父组件...当子组件需要向父组件传递数据时,就要用到自定义事件。v-on指令除了监听DOM事件外,还可以用于组件之间的自定义事件。 在JS的设计模式—观察者模式中有dispatchEvent和addEventL... -
Vue自定义事件
2019-08-28 11:09:18本博客记录了小编在学习Vue过程中的体会与感悟,简单来说就是小编的学习笔记,学习地址主要为Vue的官网,官网地址为:《Vue官方文档》。相关学习笔记会记录在我的博客专栏《前端Vue》中,欢迎大家关注~ 一、事件名 ... -
63Vue - 自定义事件(非父子组件通信)
2019-07-29 11:23:01在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bus = new Vue() // 触发组件 A 中的事件 bus.$emit('id-selected', 1) // 在组件 B 创建的钩子中监听事件 bus.$on('id-selected', function (id) {... -
Vue自定义事件解读
2017-09-07 11:42:43在Vue中可通过v-on指令或事件语法糖@来为DOM元素绑定事件 二.自定义事件 Vue自定义事件是为组件间通信设计,自定义事件提供$on、$off、$once、$emit、$broadcast、$dispatch 几个 api,只是在2.0版本中,$... -
vue中 点击事件的写法_vue中的事件:原生事件与自定义事件__Vue.js
2021-01-12 18:35:56模板编译 processAttrs对于ast attributes处理(v-on/@)利用onRE与dirRE来捕获事件这里最重要的就是dynamic的判断,vue中可以用动态参数来命名事件名称,如@[prop],prop为data中的值。不过通常都是一个静态的事件...
-
利用OpenCV获取二维高斯核(Python实现)
-
吊打面试官-hashMap
-
MongoDB按时间年月日查询数据
-
凡客诚品 微博营销实践暨品牌创新.ppt
-
NFS 实现高可用(DRBD + heartbeat)
-
PPT大神之路高清教程
-
MySQL 性能优化(思路拓展及实操)
-
在VMware中安装Linux虚拟机并设置联网
-
网络安全岗位面试题
-
摄影测量之内定向程序.zip
-
PowerBI重要外部工具详解
-
QHVlcPlayer.rar
-
第二章 分支程序结构设计——作业-答案.html
-
2021年 系统架构设计师 系列课
-
qengine:基于查询的处理引擎-源码
-
centos8 使用笔记
-
python第二章每日作业
-
139网站可用性测试报告.pdf
-
2014阿里巴巴校园招聘数据分析师职位笔试题目(回忆版).pdf
-
第一章 C语言 PTA 基本数据类型与表达式——作业-答案.html