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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。