vue父子组件通信问题解决的思路之一

组件之间的作用域独立，而组件之间经常又需要传递数据。A 为父组件，下面有子组件 B 和 C。A 的数据可以通过 props 传递给 B 和 C。A 可以通过 $broadcast 调用 B 和 C 的 events，从而操作 B 和 C 的数据。B 和 C 可以通过 $dispatch 调用 A 的 events，从而操作 A 的数据。当 B 需要操作 C 的数据就

码农的弟弟

3011人浏览 · 2017-02-28 08:52:11

码农的弟弟 · 2017-02-28 08:52:11 发布

组件之间的作用域独立，而组件之间经常又需要传递数据。

A 为父组件，下面有子组件 B 和 C。

A 的数据可以通过 props 传递给 B 和 C。
A 可以通过 $broadcast 调用 B 和 C 的 events，从而操作 B 和 C 的数据。
B 和 C 可以通过 $dispatch 调用 A 的 events，从而操作 A 的数据。

当 B 需要操作 C 的数据就会比较麻烦，需要先 $dispatch 到 A，再 $broadcast 到 C。涉及的组件通信就越多、越频繁，会导致难以管理和维护。

这就是 Vuex 的意义所在。它可以将数据置于单独的一层，并提供给外部操作内部数据的方法。

=== === ===

更新：

Vue 2 发布了，去掉了 $dispatch 和 $broadcast，已经不会出现通信事件 ping-pong 的情况了。我们需要有一个 Vue 实例来充当通信媒介的作用，Vue 官方文档里将它叫做 event bus。

export default new Vue();

当我们需要组件之间事件通信的时候，只需要对这个 event bus 使用 $emit 和 $on 就可以了。

import Bus from './bus.js';

export default Vue.extend({
  template: `
  <div>{{msg}}</div>
  `,

  data: () => ({
    msg: 'Hello World!'
  }),

  created() {
    Bus.$on('setMsg', content => {
      this.msg = content;
    });
  }
});

import Bus from './bus.js';

export default Vue.extend({
  template: `
  <div @click="sendEvent">Say Hi</div>
  `,

  methods: {
    sendEvent() {
      Bus.$emit('setMsg', 'Hi Vue!');
    }
  }
});

Event bus 是一种实践，你也可以在 Vue 1.x 中使用它。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^