Vuejs - 在非父子组件之间交换信息

Posted 2023-02-23

【中文标题】Vuejs - 在非父子组件之间交换信息

【英文标题】：Vuejs - exange informations between non parent-child components

【发布时间】：2018-03-14 19:30:57

【问题描述】：

我正在尝试在两个 VueJs 组件之间交换信息。

情况如下：

组件 A 是主要组件。 B和C属于A，D属于C。

我想从组件 B 更改组件 D 的变量值。

我看到here 说，如果组件使用相同的根组件，我们可以从第一个组件到根组件进行广播，然后在将广播数据从根组件获取到第二个组件之后。 但就我而言，我的组件 D 并不直接位于根目录中，而是位于“组件树”的更深处……所以，我尝试过，似乎这不起作用。

什么是最简单或更优雅的方法？

谢谢。

【问题讨论】：

How can I share data between non parent-child components in Vue的可能重复

【参考方案1】：

对于这样的事情，我会使用 vue 文档中描述的 Eventbus；用于传递信息的空白 Vue 对象。

window.EventBus = new Vue();

然后在接收数据的组件中，您将创建一个事件。

mounted: function () 
    EventBus.$on('name', function (data) 
        // Do something with the data
    );

最后，在发送数据的组件中，你需要调用那个函数。

methods: 
    someFunction: function () 
        EventBus.$emit('name', data);
    

您可以创建一个原型链接以提供对 EventBus 对象的访问以方便使用。

Vue.prototype.$eventBus = window.EventBus

您可以使用this.$eventBus.$on 或this.$eventBus.$emit 访问，如jsFiddle 所示。

【讨论】：

谢谢！我使用的是Vue-cli，所以我没有使用与您相同的语法（xxx.xx = new Vue（）; ...我开始从事vuejs和Web开发，但我不知道如何在我的组件中使用你的帮助。你能帮我吗？

其实我用的是单页组件，具体模板里你说的我不知道怎么用。

好的，我明白了。使用单页组件模板时，我创建了一个 eventBus.js 文件，包括“从 vue 导入 Vue\n let bus = new Vue()\n 导出默认总线”等如果我需要从我的 eventBus 发出或监听事件，我只需要“从'@/path/eventBus'导入总线”然后像这样使用它：'bus.$on('myEvent', myVariable)'

抱歉，上周很忙。如果您使用的是组件，我通常会将其转换为插件。这样你就可以在你的主javascript中使用Vue.use(plugin)，那么你的所有组件都可以访问EventBus对象。

好的，很有趣！那么，这样的话，我怎么称呼这个新插件呢？