VUE 组件间的通信方式

• 父子通信props和$emit
• 父子通信 ref\ $refs 和 $children\$parent
• 兄弟通信eventBus
• 根组件和后代组件provide和inject
• Vuex 状态管理

1、父子组件通信props和$emit
①父组件向子组件传值时子组件使用props进行接收数据，子组件中添加自定义属性实现父组件向子组件传值，此时不可修改子组件中的数据，只能使用。

// 子组件 News.vue
<template>
  <div>{{ msg }}</div>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      default: "",
    },
  },
};
</script>

// 父组件Home.vue
<template>
  <div id="app">
    <News :msg="msg"></News>
  </div>
</template>

<script>
import News from "./components/News";
export default {
  name: "App",
  components: {
    News,
  },
  data() {
    return {
      msg: "我是父组件",
    };
  },
};
</script>

②子组件向父组件传递参数时需要在子组件的方法中使用this.$emit触发自定义的函数，在父组件调用子组件时添加其自定义事件获取子组件中传递的参数值实现子组件和父组件的通信。

// 子组件 News.vue
<template>
  <div @click="BtnFun">{{ msg }}</div>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      name: "张三",
    };
  },
  methods: {
    BtnFun() {
      this.$emit("changeParam", this.name);
    },
  },
};
</script>

// 父组件 Home.vue
<template>
  <div id="app">
    <News :msg="msg" @changeParam="BtnParam"></News>
  </div>
</template>

<script>
import News from "./components/News";

export default {
  name: "App",
  components: {
    News,
  },
  data() {
    return {
      msg: "我是父组件",
    };
  },
  methods: {
    BtnParam(param) {
      console.warn(param);
    },
  },
};
</script>

2、父子组件通信 ref/ $refs和$children/$parent
①在子组件中定义属性ref，通过ref指向子组件实例，通过实例可访问子组件中的数据和方法

<template>
  <div id="app">
    <Info ref="info"></Info>
  </div>
</template>

<script>
import Info from "./components/Info";

export default {
  name: "App",
  components: {
    Info,
  },
  mounted() {
    console.warn("refs====", this.$refs.info.name);
    this.$refs.info.BtnFun();
  },
};
</script>

// 子组件 Info
<template>
  <div @click="BtnFun">{{ name }}</div>
</template>
<script>
export default {
  data() {
    return {
      name: "张三",
      age: 18,
    };
  },
  methods: {
    BtnFun() {
      console.warn("Hello");
    },
  },
};
</script>

②在父组件中通过$children可以访问子组件中的数据和方法，在子组件中通过$parent可以访问父组件中的数据和方法

<template>
  <div id="app">
    <Info ref="info"></Info>
  </div>
</template>

<script>
import Info from "./components/Info";

export default {
  name: "App",
  components: {
    Info,
  },
  data() {
    return {
      msg: "我是父组件",
    };
  },
  mounted() {
    console.warn("子组件数据", this.$children[0].name); // 张三
  },
};
</script>

// 子组件 Info
<template>
  <div @click="BtnFun">{{ name }}</div>
</template>
<script>
export default {
  data() {
    return {
      name: "张三",
      age: 18,
    };
  },
  mounted() {
    console.warn("父组件数据", this.$parent.msg); // 我是父组件
  },
  methods: {
    BtnFun() {
      console.warn("子组件");
    },
  },
};
</script>

3、兄弟组件通信 （事件总线eventBus）
首先在全局定义一个bus对象，在Info组件中通过$emit触发时间传递数据，再News组件中通过$on监听接收传递过来的数据

• 全局定义

import Vue from "vue";
export default new Vue();

// 兄弟组件 Info
<template>
  <div @click="BtnFun">{{ name }}</div>
</template>
<script>
import bus from "../utils/bus.js";
export default {
  data() {
    return {
      name: "张三",
      age: 18,
    };
  },
  methods: {
    BtnFun() {
      bus.$emit("changeInfo", this.age);
    },
  },
};
</script>

// 兄弟组件 News
<template>
  <div>
    <div>{{ age }}</div>
  </div>
</template>
<script>
import bus from "../utils/bus.js";
export default {
  data() {
    return {
      age: 0,
    };
  },
  mounted() {
    bus.$on("changeInfo", (e) => {
      this.age = e;
    });
  },
};
</script>

4、父组件和各后代通信注入依赖(provide和inject)
在父组件中通过provide提供需要传递给后代组件的数据和方法，在后代组件中通过inject 进行接收数据，无论后代组件层级有多深，都可访问到数据

<template>
  <div id="app">
    <Info ref="info"></Info>
  </div>
</template>

<script>
import Info from "./components/Info";

export default {
  name: "App",
  components: {
    Info,
  },
  data() {
    return {};
  },
  provide() {
    return {
      text: "根组件中的数据",
    };
  },
};
</script>

// 子组件 Info
<template>
  <div @click="BtnFun">{{ name }}</div>
</template>
<script>
export default {
  data() {
    return {
      name: "张三",
    };
  },
  inject: ["text"],
  mounted() {
    console.warn("text数据", this.text); // 根组件中的数据
  },
  methods: {
    BtnFun() {},
  },
};
</script>

5、Vuex 状态管理
官方定义：Vuex是一个专为Vue.js 应用程序开发的状态管理模式。其实Vuex就是将组件中频繁使用到数据进行集中式存储管理，供各组件之间共享数据。Vuex中主要包括以下：
state：存储数据(变量)。
getters：获得变量的值，类似computed的用法。
mutations：存储修改state数据的方法，其中不支持异步方法，第一个参数默认是state。
actions：存储修改state数据的异步方法，通过dispatch进行触发，然后通过commit()触发mutation中的方法，间接修改state中的数据。