有没有办法让父组件监听它的子组件发出的自定义事件?
// -- child comp
const addnewbtn = {
template : '<div><button v-on:click="showform">Add New Task</button><form v-show="form" v-on:submit.prevent="addnewtask"><input type="text" v-model="taskname" /><button>Add</button></form></div>',
data(){
return {
taskname : '',
form : false
}
},
methods : {
showform(){
if( this.form ){
this.form = false;
}else{
this.form = true;
}
},
addnewtask(){
this.$emit('add-task',this.taskname);
}
},
}
// -- parent comp
Vue.component('todolist',{
components : { addnewbtn },
data(){
return {
todoitems : [
{ name : 'Task 1', checked : false },
{ name : 'Task 2', checked : false },
{ name : 'Task 3', checked : false },
]
}
},
methods : {
makeitdone(item){
if( this.todoitems[item].checked ){
this.todoitems[item].checked = false;
}else{
this.todoitems[item].checked = true;
}
},
removeitem(item){
this.todoitems.splice(item,1);
},
addtask(){
alert();
}
},
created(){
this.$root.$on('add-task',function(){
alert();
});
}
});
试过了
this.$root.$on('add-task',function(){
alert();
});
或者
this.$parent.$on('add-task',function(){
alert();
});
但不幸的是,两部作品都没有。我怎样才能做到这一点?
最佳答案
在您的父组件中,只需添加 listen @add-task
<addnewbtn @add-task="addtask" />
然后它可以监听从 child 发出的事件
this.$emit('add-task',this.taskname);
关于vue.js - 父级在 Vuejs 中监听子级发出事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56999618/