Vue中如何实现长尾词事件触发emit和监听on的复杂用法？
- 内容介绍
- 文章标签
- 相关推荐
本文共计785个文字，预计阅读时间需要4分钟。
目录 + Vue事件触发（emit）及监听（on） + 每个Vue实例都实现了事件接口 + 案例 + Vue emit事件无法触发问题 + Vue事件触发（emit）及监听（on） + 每个Vue实例都实现了事件接口
1.使用 + $on(eventName, callback) + 监听事件 + 使用$on(eventName, callback)监听事件
目录
- vue事件触发(emit)及监听(on)
- 每个 vue 实例都实现了事件接口
- 案例
- vue emit事件无法触发问题
vue事件触发(emit)及监听(on)
每个 vue 实例都实现了事件接口
- 1.使用 $on(eventName,callback) 监听事件
- 2.使用 $emit(eventName,[…args]) 触发事件
$emit 和 $on 必须都在实例上进行触发和监听。
// on监听emit触发的事件 created:function(){ this.$on('emitFn',(arg)=> { console.log('on监听参数====',arg) //['string',false,{name:'vue'}] }) }, methods:{ emit () { // $emit 事件触发 参数是多个不同的数据类型时 用数组传递 this.$emit('emitFn',['string',false,{name:'vue'}]) // 监听多个emit事件,将事件名用数组形式写 ['emitFn1','emitFn2']； this.$emit(['emitFn1','emitFn2'],'arg1') } }
案例
通过在父级组件中，拿到子组件的实例进行派发事件，然而在子组件中事先进行好派好事件监听的准备，接收到一一对应的事件进行一个回调，同样也可以称之为封装组件向父组件暴露的接口。
vue emit事件无法触发问题
在父组件中定义事件监听，会出现无法触发对应的事件函数，在下面的代码中，我想通过v-on:event_1=“handle”, 想监听子组件中的event_1事件，但尽管事件发生了， 但还是触发不了，这个问题在于v-on:event_1="handle"的位置，需要放在 <my-template :users=“users” v-on:event_1=“handle” ></my-template> 中。
<body> <div id='app' v-on:event_1="handle1"> <my-template :users="users"></my-template> </div> </body> <script> Vue.component('my-template', { data: function () { return { test:"hello" } }, props: ["users"], template: ` <div> <ul> <li v-for="item in users" :key="item.id"> <div> <label>name:</label> {{item.name}} <label>content:</label> {{item.content}} <label>time:</label> {{item.time}} <input type="button" value="remove" @click="remove(item.id)"></input> <input type="button" value="通知" @click="$emit('event_1',this)"></input> </div> </li> </ul> </div> `, methods:{ remove(id){ console.log(id); for(let i = 0; i<this.users.length;++i){ if(this.users[i].id == id){ this.users.splice(i,1); break; } } }, notice(id){ console.log("notice", id); }, handle(e){ console.log("son handle",e) } } }) var vm = new Vue({ el: '#app', data: { posts: [ { id: 1, title: 'My journey with Vue' }, { id: 2, title: 'Blogging with Vue' }, { id: 3, title: 'Why Vue is so fun' } ], postFontSize: 1, searchText: 'hello', users:[ { name:"zhangsan", id:'1', time:new Date().getUTCDate(), content:"白日依山尽，黄河入海流" }, { name:"lisi", id:'2', time:new Date().getUTCDate(), content:"会当凌绝顶，一览众山小" }, { name:"wangwu", id:'3', time:new Date().getUTCDate(), content:"大漠孤烟直，长河落日圆" } ] }, methods:{ handle1(e){ console.log("event 事件触发，参数为:",e); } } }) </script>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。
本文共计785个文字，预计阅读时间需要4分钟。
目录 + Vue事件触发（emit）及监听（on） + 每个Vue实例都实现了事件接口 + 案例 + Vue emit事件无法触发问题 + Vue事件触发（emit）及监听（on） + 每个Vue实例都实现了事件接口
1.使用 + $on(eventName, callback) + 监听事件 + 使用$on(eventName, callback)监听事件
目录
- vue事件触发(emit)及监听(on)
- 每个 vue 实例都实现了事件接口
- 案例
- vue emit事件无法触发问题
vue事件触发(emit)及监听(on)
每个 vue 实例都实现了事件接口
- 1.使用 $on(eventName,callback) 监听事件
- 2.使用 $emit(eventName,[…args]) 触发事件
$emit 和 $on 必须都在实例上进行触发和监听。
// on监听emit触发的事件 created:function(){ this.$on('emitFn',(arg)=> { console.log('on监听参数====',arg) //['string',false,{name:'vue'}] }) }, methods:{ emit () { // $emit 事件触发 参数是多个不同的数据类型时 用数组传递 this.$emit('emitFn',['string',false,{name:'vue'}]) // 监听多个emit事件,将事件名用数组形式写 ['emitFn1','emitFn2']； this.$emit(['emitFn1','emitFn2'],'arg1') } }
案例
通过在父级组件中，拿到子组件的实例进行派发事件，然而在子组件中事先进行好派好事件监听的准备，接收到一一对应的事件进行一个回调，同样也可以称之为封装组件向父组件暴露的接口。
vue emit事件无法触发问题
在父组件中定义事件监听，会出现无法触发对应的事件函数，在下面的代码中，我想通过v-on:event_1=“handle”, 想监听子组件中的event_1事件，但尽管事件发生了， 但还是触发不了，这个问题在于v-on:event_1="handle"的位置，需要放在 <my-template :users=“users” v-on:event_1=“handle” ></my-template> 中。
<body> <div id='app' v-on:event_1="handle1"> <my-template :users="users"></my-template> </div> </body> <script> Vue.component('my-template', { data: function () { return { test:"hello" } }, props: ["users"], template: ` <div> <ul> <li v-for="item in users" :key="item.id"> <div> <label>name:</label> {{item.name}} <label>content:</label> {{item.content}} <label>time:</label> {{item.time}} <input type="button" value="remove" @click="remove(item.id)"></input> <input type="button" value="通知" @click="$emit('event_1',this)"></input> </div> </li> </ul> </div> `, methods:{ remove(id){ console.log(id); for(let i = 0; i<this.users.length;++i){ if(this.users[i].id == id){ this.users.splice(i,1); break; } } }, notice(id){ console.log("notice", id); }, handle(e){ console.log("son handle",e) } } }) var vm = new Vue({ el: '#app', data: { posts: [ { id: 1, title: 'My journey with Vue' }, { id: 2, title: 'Blogging with Vue' }, { id: 3, title: 'Why Vue is so fun' } ], postFontSize: 1, searchText: 'hello', users:[ { name:"zhangsan", id:'1', time:new Date().getUTCDate(), content:"白日依山尽，黄河入海流" }, { name:"lisi", id:'2', time:new Date().getUTCDate(), content:"会当凌绝顶，一览众山小" }, { name:"wangwu", id:'3', time:new Date().getUTCDate(), content:"大漠孤烟直，长河落日圆" } ] }, methods:{ handle1(e){ console.log("event 事件触发，参数为:",e); } } }) </script>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。