Почему компонент не реагирует на пользовательское событие?

Question

Я излучаю событие с именем emit-event-main2-counter in Main2.vue

Почему центр данных в Bottom.vue не обновляется?

App.vue

<template>
  <div class="app">
    <Main2 />
    <Bottom/>
  </div>
</template>

<script>
import Main2 from "./components/Main2";
import Bottom from "./components/Bottom";

export default {
  components: {
    Main2,
    Bottom
  },

}
</script>

<style scoped>
  h1 {
    color: red;
  }
</style>

Main2.vue

<template>
    <div>
        main2 template <span class="text1">{{message}}</span>
        <button type="button" v-on:click="btnClickButton">my click</button>
        <div>{{counter}}</div>

    </div>
</template>

<script>
    import appInput from "./appInput.vue";
    export default {
        data: () => {
            return {
                message: "theText",
                counter: 0,
            }
        },
        components: {
           appInput,
       },
        methods: {
            btnClickButton(e) {
                this.$root.$emit('emit-event-main2-counter', this.counter)
                console.log('button');
                this.counter +=1;
            }
        }

    }
</script>

<style scoped>
.text1 {
    color:red;
}
.text2 {
    color:blue;
}
</style>

Bottom.vue

<template>
  <div  class="Bottom" v-on:emit-event-main2-counter="cntr = $event">
      bottom text and cntr ({{cntr}})
  </div>
</template>

<script>

export default {
    data: () => {
        return {
            cntr: 0
        }
    },
}
</script>

<style scoped>

</style>

Answer 1

Вы можете отправить событие родительскому элементу из Main2, имеющему в качестве параметров this.counter, а в родительском элементе получить его и передать через props в Bottom

В Main2:

this.$emit("emit-event-main2-counter",this.counter);

в компоненте parent:

  <template>
   <Main2 v-on:emit-event-main2-counter="sendToBottom"/>
   <Bottom :cntr="pcounter"/>
  ....
  </template>


  data:{
   pcounter:0
    },
  methods:{
       sendToBottom(c){
        this.pcounter=c
          }
      }

Bottom должен иметь свойство с именем cntr

  props:["cntr"]

Bottom.vue

     <template>
      <div  class="Bottom" >
          bottom text and cntr ({{cntr}})
      </div>
    </template>

  <script>

    export default {
           props:["cntr"],
         data: () => {
             return {
                }
            },
       }
     </script>

Answer 2

Если вы хотите использовать корневые события, вам нужно отправить событие с this.$root.$emit(), а также прослушать событие в корне, например: this.$root.$on().

Вы должны использовать его непосредственно в части скрипта. Прослушивание корневого события, например в хуке created() и затем отключите его с помощью $off в хуке beforeDestroy().

---

Однако я бы не советовал вам использовать $root события. Обычно лучше общаться между такими компонентами, как @BoussadjraBrahim, предложенный в его ответе .

Если у вас более сложное приложение, имеет смысл взглянуть на Vuex и сохранить полное состояние в хранилище Vuex. Делая это, вы можете наблюдать за глобальным состоянием приложения в компонентах и ​​реагировать на его изменения. В этом случае вы бы использовали хранилище Vuex вместо корневого EventBus.