Vue emit(未侦听来自子级的emitting事件)

Question

我是一个初学者，我尝试过vue-emit事件。但该活动没有听取家长的意见。请帮帮我！！

应用程序中的vue

<app-header v-bind:somethings='name' @custom-event-name="setName"></app-header> 
setName(childName){
this.name= childName;

}

体内.vue

<button @click="changeName"> click me to change name </button>
changeName: function(){
this.$emit('custom-event-name', 'Some Value');    }

Answer 1

根据我在script部分中看到的内容，您没有导入Body组件，这是您试图发出事件的地方。

现在你有这个：

<script>
import Header from './components/Header.vue';
export default {
components:{
'app-header': Header,
'app-body' : Body
},
data () { 
return  {
name: 'John', 
} 
}, 
methods: {
setName(payload) {
this.name = payload;
}
}
}
</script>

Body组件没有import语句，所以您的父组件不知道Body是什么。要解决此问题，您只需要像对Header所做的那样添加一个导入即可。它可能看起来像这样：import Body from './components/Body.vue';

现在正在使用Body组件，您需要将其包含在template中。您将执行与app-header相同的操作，并包含类似于<app-body></app-body>的标记。最后，您需要添加事件侦听器，以便父级知道何时运行setName。这会被添加到app-body标签中，并且最终看起来像这样：<app-body @custom-event-name="setName"></app-body>