Javascript 如何使用VUE 2.0组件之间的事件创建挂钩

我创建了两个组件。现在，使用 我需要的是启动组件2传递参数的“logThat（someObj）”方法，正如您在这把小提琴中看到的那样：

Vue.component('component-one', {
    template: '#template-a',
    methods: {
        onClick() {
            const someObj = {
                foo: "foo",
                bar: "bar"
            }

            vm.$emit('selected', someObj)
            vm.currentView ='component-two';
        }
    }
});

//Any hint??
/*vm.$on('selected', (someObj) => {
    this.logThat(someObj)
})*/

Vue.component('component-two', {
    template: '#template-b',
    methods: {
        onClick() {
            vm.currentView ='component-one';
        },
        logThat(someObj) {
            console.log(someObj);
       }
    }
});

---

如果有人对如何处理这个问题有任何建议，我们将不胜感激：）

从技术上讲，您应该按照文档中给出的方法使用

但在您当前的示例中，它将不起作用。原因：当你来回移动时，你的组件“一”和“二”会被创建和破坏

这是您更新的JSFIDLE:。以下是变化：

事件总线：

var-bus=new-Vue（）；

正在从组件1发送事件：

bus.$emit（'selected'，someObj）；

组件2中的接收事件：

created:function（）{
log（“已创建组件2，侦听“选定”事件”）；
总线。$on（'selected'，this.logThat）；
}

如果打开dev控制台并观察日志，您将注意到组件2被多次创建，而旧的组件一直在侦听，因为它们没有完全销毁

---

要克服这一点，您需要远离动态组件，同时在根模板上创建

组件一

和

组件二

。您可以使用

v-show

（而不是

v-if

，再次破坏组件实例），根据需要显示/隐藏任何视图。然后您可以使用事件总线进行通信，如中所述。

首先，非常感谢您帮助我更好地了解动态组件。正如我在您的示例中所看到的，当第一次触发组件2时，只会实例化它，而不会触发“selected”事件。然而，第二次我得到了预期的结果。很明显，我需要使用静态组件，并使用v-show来切换。但是假设你有变量“ShowMe”，我在哪里声明？在vue的实例化过程中，在每个组件中，都是？如果您单击第三次或第四次，您将在原始小提琴中看到更有趣的结果-旧的

组件2

从未被销毁。相反，它每次都会被重新创建，导致不可预测的结果。这里是更新的提琴：-在这里，我使用

v-show

来显示/隐藏组件，而不是在它们之间动态切换。在这里你会发现你期望的结果。太好了！！再次感谢！