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>
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
