vue 组件通信的几种方式解读

$children / $parent

• 拿到 $children / $parent 即可访问子 / 父 组件的所有变量和方法。
• 官方说 $children / $parent 仅作为应急的通信方法，其中一个原因就是 $children / $parent仅代表的是根组件下的第一个子/父vue组件（普通html标签不含有vue实例，不包含在内），当位置变化或者之间需要增加新的组件，对应的指向就变了，如以下例子。

props / $emit

官方推荐的父子关系通信方式，不用在乎层级关系，而且没有多余数据传输，父组件给什么，子组件就拿什么、用什么。（原理也是监听和广播，后第三种方式一样，只不过这是局部的，别忘了@是v-on的省略）

父组件：

<template>
  <!-- 4.使用 -->
  <div>
    父组件：
    <div class="main">
      我是父组件，我自己拿的子组件数据：{{childrenMsg}}
      <el-button type="text" @click="alertBox(true)">点我出弹框</el-button>
      <br />
      子组件主动给我更新的数据：{{childrenMsg2}}
    </div>
    <!-- 单独放在根组件的下一级，保证层级关系不被影响 -->
    <br />子组件：
    <p-com
      :parentMsg2="msg"
      memo="这是爸爸传给你的字符串"
      @alertBox="flag=>{alertBox(flag)}"
      @setParentMsg="msg=>{setMsg(msg)}"
    ></p-com>
  </div>
</template>
    
 <script>
// 2.引入
import pCom from "./pCom";

export default {
  components: { pCom }, // 3.挂载
  data() {
    return {
      msg: "parent",
      childrenMsg: "",
      childrenMsg2: ""
    };
  },
  methods: {
    alertBox(flag) {
      alert(`调用了${flag ? "自己" : "爸爸"}的弹框`);
    },
    setMsg(msg) {
      this.childrenMsg2 = msg;
    }
  },
  mounted() {
    console.log(this.$children);
    this.childrenMsg = this.$children[1].msg;
  }
};
</script>

<style scoped>
</style>

子组件：

<template>
  <div>
    <!-- 注意：template中没有this，这里没有this，即不用this.parentMsg -->
    我是子组件，我自己拿的父组件数据：{{parentMsg}}
    <br />
    爸爸用props传给我的信息：{{parentMsg2}}
    （备注：{{memo}}）
    <el-button type="text" @click="useParentMethods">点我出弹框，并且修改爸爸的数据</el-button>
  </div>
</template>

<script>
export default {
  props: ["parentMsg2", "memo"],
  data() {
    return {
      msg: "children",
      parentMsg: ""
    };
  },
  methods: {
    useParentMethods() {
      this.$emit("alertBox", false);
      this.$emit("setParentMsg", `看你还嚣张！ ${Date().split(' ')[4]}`);
    }
  },
  mounted() {
    console.log(this.$parent);
    this.parentMsg = this.$parent.msg;
  }
};
</script>

<style scoped>
</style>

eventBus

监听和广播：
优点：使用简单，导入即用。
缺点：阅读性差，因为你只能打印出这个bus（vue实例），看到所有的监听事件，但并不知道事件谁用了，在哪用的，用来干什么，所以仅适合小规模开发，非父子组件交互较少场景，仅用来处理非父子组件间的通信

localStorage / sessionStorage

通信比较简单,数据和状态比较混乱,不太容易维护。
localStorage 将数据存入浏览器，关闭浏览器再次打开仍然存在，需要手动清除；
sessionStorage将数据存在对话框，关闭这个页面就没了。

在任何地方使用 localStorage.setItem("k", JSON.stringify("v"))存入数据（方法-函数地址）；
在任何地方使用 JSON.parse(localStorage.getItem("k")) 读取数据（方法-函数地址）；
任何地方包括vue实例以外，因为他是原生js。

vuex

参考

Vue.js中的8种组件间的通信方式
vue组件 Prop传递数据