通过EventBus

Question

我想从一个组件向另一个组件（子组件）发出一些数据。 在我的main.js中，我创建了：export const Bus = new Vue({})。 然后在我的第一个子组件中，我得到了v-model的输入，我想通过那个v模型。

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

听众正在调用＆＃34; eventHandlerMethod＆＃34;更新数据实例。