Vue.js 2.0 中sibling 组件之间的通信

发布于11月06日

Overview

在Vue.js 2.x、一百.

那么，在Vue.js 2.x中的sibling 组件之间进行通信的正确方式是什么呢？

出身背景

据我所知，Vue.js 2.x、 sibling 姐妹通信的首选方法是is to use a store or an event bus.

根据Evan(Vue.js的创建者)的说法:

还值得一提的是，"在组件之间传递数据"是

如果一段数据需要由多个组件共享，请 Select

[Link to discussion]

以及:

.once和.sync不推荐使用.props 现在总是单向下降.到

所以，Evan suggests使用$emit()和$on().

担忧

让我担心的是:

每个store和event都有一个全球可视性(如果我错了，请纠正我)；
为每一次小的交流创建一个新店太浪费了；

我想要的是为sibling 组件提供大约scopeevents或stores的可见性.(或许我不明白上面的意思.)

Question

那么，sibling 组件之间的正确通信方式是什么？

推荐答案

用Vue.js 2.0，我正在使用eventHub机制，如in the documentation所示.

定义集中式事件中心.

 const eventHub = new Vue() // Single event hub

 // Distribute to components using global mixin
 Vue.mixin({
     data: function () {
         return {
             eventHub: eventHub
         }
     }
 })

现在，在组件中，您可以使用
```
 this.eventHub.$emit('update', data)
```

听你说

 this.eventHub.$on('update', data => {
 // do your thing
 })

Update

请参阅the answer by alex，它描述了一个更简单的解决方案.

Vue.js相关问答推荐

带 Bootstrap 的 Vue js，导航栏菜单不起作用

我需要在 nuxt2 上使用 /index 作为 url 的一部分

Vuetify 3 - NavBar 组件占据整个视口高度

我在表格中创建了一个包含信息的新行，但在 Cypress e2e 测试中我无法获得最后一行(新行)

Vue3 动态渲染

在 Ajax 函数中访问 Vue.js 组件属性

Vue：根元素内容和内容分发槽

Vuetify v-data-table ，如何在 HTML 中呈现标题文本？

VueJS + Typescript：类型上不存在属性

v-on：submit.prevent 不停止表单提交

如何在nuxt路由中添加meta？

Nuxt：显示静态文件夹中的本map像

使用 Vee-Validate 在提交时验证子输入组件

Vue.js：从 parent父Vue 获取数据

在 v-for 循环中使用 v-model

Vue CLI - 将构建输出组合到单个 html 文件

Nuxt.js - API 调用的最佳场所

Vue - 如何在 v-if 或组件中使用窗口对象

居中 v-toolbar-title

Apollo 客户端在向服务器发送Mutations 时返回400(错误请求)错误

实用课程推荐