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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持阿兔在线工具。
