Vue emit (не слушал генерирующее событие от дочернего элемента)

Я новичок и попробовал vue emit event. Но событие не слушают от родителя. Пожалуйста, помогите мне!!

В 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');    }

events vue.js emit
person Kyaw Zay Win    schedule 26.09.2020    source источник
comment
Как импортируется компонент app-header?   -  person Montgomery Watts    schedule 26.09.2020
comment
Вы также импортируете и используете компонент Body?   -  person Montgomery Watts    schedule 26.09.2020
comment
Я импортировал заголовок приложения как следующий: бро @ <script> import Header from './components/Header.vue'; export default { components:{ 'app-header': Header, }, data () { return { name: 'John', } }, methods: { setName(childName){ this.name= childName; } }</script>   -  person Kyaw Zay Win    schedule 26.09.2020

Ответы (1)


arrow_upward
1
arrow_downward

Из того, что я вижу в вашем разделе 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>

person Montgomery Watts    schedule 26.09.2020