Vue2事件总线在第二次调用后工作

Question

我有一个嵌套组件，子组件应该从主实例接收一个参数，但问题是我必须调用该事件两次才能获取参数。

index.html

<div id="app">
    <button @click="displayComponent">Display</button><br/><hr/>
    {{ message }}

    <mycomponent v-if="showComponent" @hide="hideComponents"></mycomponent>
</div>

code.js

window.bus = new Vue();

Vue.component('mycomponent', {
    template: `
        <div>
            <h3>Im the parent component</h3>
            <childcomponent></childcomponent>
            <button @click="$emit('hide')">Hide components</button>
        </div>
    `
});

Vue.component('childcomponent', {
    template:`
        <div>
            <h4>Im the child component</h4>
            <p>{{ data }}</p>
        </div>
    `,

    data() {
        return {
            text: 'Nothing loaded'
        };
    },

    methods: {
        test() {
            alert('hello');
        },

        getData(x) {
            this.text = x;
        }
    },

    created(){
        bus.$on('extraCall', data => {
            this.getData(data);
            this.test();
        });
    }
});

const app = new Vue({
    el: '#app',

    data: {
        message: 'hello world!',
        showComponent: false
    },

    methods: {
        displayComponent() {        
            bus.$emit('extraCall', 'this is some extra text');
            this.showComponent = true;
        },

        hideComponents() {
            this.showComponent=false;
        }
    }
});

子组件元素内的文本值设置为默认值，单击“显示”按钮后，它会触发 bus.$emit 并带有一些文本作为参数的 extraCall 事件，这应该会更新文本值，并且它仅在第二次单击“显示”按钮后才会发生。

我错过了什么？

Answer 1

<mycomponent>（及其子 <childcomponent>）在单击“显示”按钮时未实例化，因为 v-if="showComponent"。

第一次点击：

1. extraCall 在总线上发出，但该事件没有侦听器，因此被忽略。
2. <mycomponent> 在将showComponent 设置为true 后被实例化。
3. <mycomponent> 在其created 钩子中为extraCall 事件注册一个监听器。

第二次点击：

1. extraCall 在总线上发出，<mycomponent> 处理它。

您可能认为应该交换 bus.$emit() 和 this.showComponent = true 行，以便 <mycomponent> 在事件发出之前被实例化，但这仍然行不通，因为 Vue 推迟了创建直到下一个微任务更新视图。

这可能有效：

displayComponent() {
  this.showComponent = true;

  // Wait for child component to be instantiated
  this.$nextTick(() => {  
    bus.$emit('extraCall', 'this is some extra text');
  });
}

如果上面的代码对你有用，我仍然不推荐它。在发出事件之前，您不需要考虑子组件的创建（它将您的组件耦合在一起）。您应该以其他方式共享数据，查看其他关于跨组件共享数据的最佳方式的 SO 问题。