Vue 组件间通信的几种方式

本文已参与「新人创作礼」活动，一起开启掘金创作之路

- Vue中实现组件间通信：

.sync实现简单，其实是通过props传递了属性，只是通过.sync修饰符监听了data的修改

provide和inject稍微复杂，需要在祖先组件写provide，孩子组件写inject接收。但是共享范围广，只要祖先提供了，任意子组件都可以使用。 注：inject只是复制了祖先的属性值，如果只是自己修改时没有用的，还是要inject并调用祖先组件的方法修改祖先的值。（传递的是属性引用如对象地址其实也可以实现子组件修改父组件的值，但是不推荐，难以控制）

.sync

简单理解就是.sync是个语法糖，父组件将数据传递给子组件的同时告诉它，如果你修改了需要同步给我。简便得实现了子组件想要修改父组件的data的需求。

Father组件中使用Son组件，把num数据传给它时：

<Son :num.sync="n" />

如果不使用.sync的时候，可以用eventbus的on和emit进行监听和修改。 即： :num.sync="n" 这一句等同于:num="n" v-on:update:num="n = $event"

//father.vue
    // v-on表示监听Son组件里的名称为“update：num”的事件，听到了之后就把$event的值赋值给自己的n
    // $event里面存的是$emit调用之后传给它的值
<template>
  <div id="father">
    Father的number:{{ n }}
    <hr />
    <Son :num="n" v-on:update:num="n = $event" />
  </div>
</template>

<script>
import Son from "./son";
export default {
  data() {
    return { n: 100 };
  },
  components: {
    Son,
  },
};
</script>
<style></style>

// son.vue
<template>
  <div id="son">
    传给Son的number： {{ num }}
    <button @click="$emit('update:num', num - 1)">Father的number-1</button>
  </div>
</template>

<script>
export default {
  props: ["num"],  //用props获取了Father给它的num
};
</script>

demo：点击按钮可以修改Father的number provide和inject： 在Father组件中写provide，即提供给其他组件使用的数据和方法。Son组件中写inject，获取Father传递的属性和方法。

// father.vue
<template>
  <div id="father">
    Father的number:{{ n }}
    <hr />
    <Son :num.sync="n" />
  </div>
</template>

<script>
import Son from "./son";
export default {
  data() {
    return {
      n: 100,
    };
  },
  provide() {
    return {
      num: this.n,
      del: this.del,
    };
  },
  components: {
    Son,
  },
  methods: {
    del: function() {
      this.n -= 1;
    },
  },
};
</script>

// son.vue
<template>
  <div id="son">
    传给Son的num： {{ num }}
    <button @click="sondel">Father的number-1</button>
  </div>
</template>

<script>
export default {
  inject: ["num", "del"],
  methods: {
    sondel() {
      this.del();
    },
  },
};
</script>

demo：点击按钮会修改Father的num，但是因为自己的是复制过来的，不会修改。想· eventBus： 使用 eventBus = new Vue() 来通信，eventBus.$on 和 eventBus.$emit 是主要API。可在任意组件中通信 Vuex ：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。state存放源数据，组件通过Mutations或Actions实现对数据的修改。可在任意组件中通信

React中如何解决？ （1）子组件通过props调用父组件的函数，从而修改父组件的data； （2）需要共享的数据用Redux来管理，使用Redux提供的方法来修改。

Redux与Vuex更为相似