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传递数据

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读