我是初学者,尝试了vue发射事件。但是该事件不听父母的话。请救救我!
在App.vue中
<app-header v-bind:somethings='name' @custom-event-name="setName"></app-header>
setName(childName){
this.name= childName;
}
在Body.vue中
<button @click="changeName"> click me to change name </button>
changeName: function(){
this.$emit('custom-event-name', 'Some Value'); }
答案 0 :(得分: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>
import
组件没有Body
语句,因此您的父组件不知道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>