부모가 Vuejs에서 자식 방출 이벤트를 수신합니다.

부모가 Vuejs에서 자식 방출 이벤트를 수신합니다.

부모 컴포넌트가 자녀 컴포넌트 송신 커스텀이벤트를 듣는 방법이 있나요?

// -- 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();
});

아쉽게도 두 작품 모두 없습니다.이거 어떻게 해?

부모 컴포넌트에서는 듣기만 추가하면 됩니다.@add-task

<addnewbtn @add-task="addtask" />

그러면 그것은 아이들에게서 나오는 이벤트를 들을 수 있다.

  this.$emit('add-task',this.taskname);

언급URL : https://stackoverflow.com/questions/56999618/parent-listen-to-child-emit-event-in-vuejs