vue中的事件触发(emit)及监听(on)问题
更新时间：2022年10月09日 11:10:57 作者：荣亦
这篇文章主要介绍了vue中的事件触发(emit)及监听(on)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了el-table 行合并的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了如何用vue设计一个数据采集器，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
小编最近接手的项目中有个需求,前端显示后端返回的PDF格式的文件,下面这篇文章主要给大家介绍了关于vue通过url方式展示PDF的几种方法,需要的朋友可以参考下2023-01-01
本篇文章主要介绍了vuex 闲置状态重置方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要给大家介绍了关于如何一步步基于element-ui封装查询组件的相关资料,本文通过示例代码介绍的非常详细,对大家学习或者使用vue.js具有一定的参考学习价值,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了浅谈Vue使用Elementui修改默认的最快方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-12-12
本篇文章主要介绍了vue页面使用阿里oss上传功能的实例(二)，主要介绍OSS管理控制台设置访问权限、角色等，有兴趣的可以了解一下2017-08-08
这篇文章主要介绍了vue项目中页面底部出现白边及空白区域错误的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了如何修改vue-treeSelect的高度，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
过滤器(Filters)是 vue 为开发者提供的功能，常用于文本的格式化，这篇文章主要介绍了如何在Vue中定义和调用过滤器,需要的朋友可以参考下2023-09-09
最新评论