Question

我正在尝试将this.TC从type.js发送到同级组件ending-page.js。发射和事件中心不起作用。但是我可以根据需要从type.js发送给parent。（此应用程序中只会再有一个调用，因此，如果不需要此功能，我不想使用Vuex-我想使用简单的emits进行操作）这是我的代码：

父母：

      <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

这是一个如何在同级组件之间共享数据的示例。

子级组件向父级发出事件。父组件将数据发送给子组件。

因此，父级拥有子级之间共享的属性title。当typing发出时 input事件的指令v-model捕获它并在父对象上设置值。

参考：

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>

Answer 2

一个人可以尝试使用vuex进行交流，您要共享的数据将其存储在this。$ store.state上，或者如果函数的调用使用了mutation（同步函数）和action（异步函数） https://vuex.vuejs.org/

Answer 3

我喜欢Jeffrey Way曾经提出的建议，只需创建一个全局事件对象（偶然可以是另一个Vue实例），然后将其用作任何全局通信的事件总线。

window.eventBus = new Vue();

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

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

同级组件通信无法正常工作

3 个答案: