Vue.js Vue发射（未侦听子级的发射事件）

我是一名初学者，我尝试了vue emit事件。但是，事件不会从父级侦听。请帮帮我

应用程序中的vue

<app-header v-bind:somethings='name' @custom-event-name="setName"></app-header> 

setName(childName){
 this.name= childName;

<button @click="changeName"> click me to change name </button>

changeName: function(){
        this.$emit('custom-event-name', 'Some Value');    }

setName（childName）{
this.name=childName；

}

在Body.vue中

<app-header v-bind:somethings='name' @custom-event-name="setName"></app-header> 

setName(childName){
 this.name= childName;

<button @click="changeName"> click me to change name </button>

changeName: function(){
        this.$emit('custom-event-name', 'Some Value');    }

单击我更改名称
changeName:function（）{
这是。$emit（'custom-event-name'，'Some Value'）；}

从我在

脚本

部分看到的情况来看，您没有导入

主体

组件，您正试图在该组件中发出事件

现在你有这个：

<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>

从“./components/Header.vue”导入标题；
导出默认值{
组成部分：{
“应用程序标题”：标题，
“应用程序正文”：正文
},
数据（）{
返回{
姓名：'约翰'，
} 
}, 
方法：{
集合名称（有效载荷）{
this.name=有效载荷；
}
}
}

Body

组件没有

import

语句，因此您的父组件不知道什么是

Body

。要解决此问题，只需添加导入，就像对

标题所做的那样。它可能是这样的：
importbody from./components/Body.vue'

现在正在使用
主体
组件，您需要将其包含在
模板
中。您将执行与对
应用程序标题所做的操作相同的操作，并包含一个类似于
的标记。最后，您需要添加事件侦听器，以便父级知道何时运行
setName
。这会添加到
应用程序正文
标记中，并最终显示如下：
如何导入
应用程序标题
组件？您是否也导入并使用
正文
组件？我从“/components/header.vue”导入应用程序标题作为以下bro@
导入标题；导出默认的{组件：{'appheader'：头，}，数据（）{返回{name:'John'，}，方法：{setName（childName）{this.name=childName；}}}