将数据从子组件传递到父组件时,Vue事件不起作用

时间:2020-08-20 13:45:19

标签: vue.js vue-component custom-events

这是Jobs子组件,向父组件发出事件。

<div class="card py-1 my-1" @click="$emit('active-job', job.id, job.slug)"></div>

接受事件的父组件

<div class="col-md-4 jobs-container py-2 px-1 ml-5">
  <jobs :active-job="jobChange"></jobs>
</div>

 export default {

 components: { FilterNavigation, Job, Jobs},

 data(){
   return{
     selected: false,
   }
 },

 methods: {
  jobChange(id, slug){
    console.log(id, slug);
   }
 }

}

单击div时,该事件在子组件内发出,但不会越过父组件(不记录任何内容)。

1 个答案:

答案 0 :(得分:1)

您正在将道具active-job传递给子组件,而不是监听任何事件

您需要收听事件:

<div class="col-md-4 jobs-container py-2 px-1 ml-5">
  <jobs @active-job="jobChange"></jobs>
</div>