通过 EventBus 发送数据

Question

我想将一些数据从一个组件发送到另一个组件（子组件）。 在我的 main.js 中，我创建了：export const Bus = new Vue({})。 然后在我的第一个子组件中，我有一个带有 v-model 的输入，我想传递那个 v-model。

<template>
  <div>
    <input type="text" v-model="message" />
    <button type="button" @click="submit">Submit</button>
  </div>
</template>
<script>
  import { Bus } from './../main.js';
  export default {
    data () {
      return {
        message: ''
      }
    },
    methods: {
      submit() {
        if(this.message !== ''){
          this.$router.push('location');
          Bus.$emit('name', this.message);
        }
      }
    }
  }
</script>

我的第二个组成部分：

  import { Bus } from './../main.js';
  export default {
    data() {
      return {
        recievedMessage: ''
      }
    },
    created() {
      Bus.$on('name', (message) => {
        this.recievedMessage = message;
      })
    }
  }

然后我尝试显示传递的数据：{{ recievedMessage }}，但不幸的是它不起作用。

Answer 1

假设您在 main.js 中设置了一个全局 EventHub，那么第二个组件没有在监听，因为它没有在整个 Vuejs 生命周期中被初始化。

但是，如果您打算在父组件中呈现子组件，那么您需要将该组件导入到父组件中。

父组件

<template>
  <div>
    <input type="text" v-model="message" />
    <button type="button" @click="submit">Submit</button>
    <child-component /> 
  </div>
</template>
<script>
  import ChildComponent from '@/components/ChildComponent'
  import { Bus } from './../main.js';
  export default {
    components:{
      ChildComponent
    }
    data () {
      return {
        message: ''
      }
    },
    methods: {
      submit() {
        if(this.message !== ''){
          this.$router.push('location');
          Bus.$emit('name', this.message);
        }
      }
    }
  }
</script>

更新

子组件

   <template>
     <div>{{recievedMessage}}</div>
   </template>
   <script>
    import { Bus } from './../main.js';
      export default {
        data() {
          return {
            recievedMessage: ''
          }
        },
        created() {
          Bus.$on('name', this.eventHandlerMethod)
        },
        methods: {
          eventHandlerMethod (message) {
             this.recievedMessage = message;
          }
        }
      }
   </script>

监听器正在调用更新数据实例的“eventHandlerMethod”。