兄弟组件通信在vue中不起作用

Question

I am trying to send this.TC from typing.js to ending-page.js which are sibling components. Emits and event hubs not working. But emit from typing.js to parent works as I want. (There will be only one more call in this app, so i don't want use Vuex if it isnt necessary for this - i want to do it with simple emits ) Here's my code:

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);

        }

      },




  };

ending-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

It is an example of how to share data between siblings components.

Children components emits events to parent. Parent components send data to children.

So, the parent has the property title shared between the children. When typing emits the input event the directive v-model capture it an set the value on parent.

Ref:

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

https://v2.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>

Answer 2

可以尝试使用 vuex 进行通信，您想要共享的数据在 this.$store.state 上进行，或者如果调用函数使用突变（同步函数）和操作（异步函数） https://vuex.vuejs.org/

Answer 3

I like what Jeffrey Way suggested once, just create a global events object (which accidentally can be another Vue instance) and then use that as an event bus for any global communication.

window.eventBus = new Vue();

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

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