Комбинация компонента родного брата не работает в vue

Question

Я пытаюсь отправить this.TC из typing.js в ending-page.js, которые являются родственными компонентами.Излучатели и концентраторы событий не работают.Но излучение из typing.js в родительский работает как я хочу.(В этом приложении будет только еще один вызов, поэтому я не хочу использовать Vuex, если в этом нет необходимости - я хочу сделать это с простыми выбросами) Вот мой код:

Parent:

      <template>
    <div id = "app">

    <typing v-if = "DynamicComponent === 'typing'" />
    <ending_page v-else-if = "DynamicComponent === 'ending_page'" />

    </div>
  </template>
  <script>

  /* Importing siblings components to parent component */
  import typing from './components/typing/index.vue'
  import ending_page from './components/ending-page/index.vue'

  export default {


    name: 'app',
    components: {
      typing,
      ending_page
    },

    data() {
      return {

        DynamicComponent: "typing",

      };
    },

    methods: {

      updateDynamicComponent: function(evt, data){

        this.DynamicComponent = evt;

      },

    },


  };

  </script>

typing.js:

      import { eventBus } from "../../main";

  export default {


    name: 'app',
    components: {

    },

    data() {
      return {

        /* Text what is in input. If you write this.input = "sometext" input text will change (It just works from JS to HTML and from HTML to JS) */
        input: "",

        /* Object of TypingCore.js */
        TC: "somedata",

        /* Timer obejct */
        timer: null,
        is_started: false,
        style_preferences: null,


      };
    },


      ICallThisFunctionWhenIWantToEmitSomething: function(evt) {

          /* Sending data to ending_page component */
          this.$root.$emit('eventname', 'somedata');

          /* Calling parent to ChangeDynamicComponent && sending TC.data what will be given to ending_page (I think it looks better with one syntax here) */
          this.$emit('myEvent', 'ending_page', this.TC.data);

        }

      },




  };

end-page.js:

      import { eventBus } from "../../main";

  export default {
    name: 'ending-page',
    components: {},

    data () {
      return {
        data: "nothing",
      }
    },

    computed: {

    },

    props: {

    },

    methods: {


    },

    /* I know arrow functions etc but i was trying everyting */
    created: function () {
      this.$root.$on('eventname', function (data) {
          console.log(data)
          this.title = data
          this.$nextTick()
      })
    }

  }

Answer 1

Можно попытаться установить связь, используя vuex, данные, которыми вы хотите поделиться, делают это на этом. $ Store.state или, если для вызова функций, используются мутации (функции синхронизации) и действия (функции асинхронизации) https://vuex.vuejs.org/

Answer 2

Мне нравится то, что однажды предложил Джеффри Уэй, просто создайте объект глобальных событий (который случайно может быть другим экземпляром Vue), а затем используйте его в качестве шины событий для любой глобальной связи.

window.eventBus = new Vue();

// in components that emit:
eventBus.$emit('event', data);

// in components that listen
eventBus.$on('event');

Answer 3

Это пример того, как можно обмениваться данными между одноуровневыми компонентами.

Дочерние компоненты генерируют события в родительский компонент.Родительские компоненты отправляют данные дочерним элементам.

Итак, родитель имеет свойство title, общее для детей.Когда typing генерирует событие input, директива v-model фиксирует для него установленное значение для родителя.

Ref:

https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

https://benjaminlistwon.com/blog/data-flow-in-vue-and-vuex/

Vue.component('typing', {
  props: {
    value: ''
  },
  template: '<button @click="emit">Click to change</button>',
  methods: {
    emit() {
      this.$emit('input', `changed on ${Date.now()}`);
    }
  }
});

Vue.component('ending-page', {
  props: {
    title: ''
  },
  template: '<div>{{ title }}</div>',
});

var app = new Vue({
  el: '#app',
  data() {
    return {
      title: 'unchanged',
    };
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <typing v-model="title"></typing>
  <ending-page :title="title"></ending-page>
</div>