Question

我是初学者，尝试了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');    }

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>

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>

Vue发射（未监听孩子的发射事件）

1 个答案: