Vue.js中的8种组件间的通信方式;3个组件实例是前6种通信的实例,组件直接复制粘贴即可看到运行结果

文章目录

        • 一、$children / $parent
        • 二、props / $emit
        • 三、eventBus
        • 四、ref
        • 五、provide / reject
        • 六、$attrs / $listeners
        • 七、localStorage / sessionStorage
        • 八、Vuex

实例以element ui为例。例子从上往下逐渐变复杂(后面例子没有删前面的无用代码,有时间重新整理一下!)

一、$children / $parent

Vue.js中的8种组件间的通信方式;3个组件实例是前6种通信的实例,组件直接复制粘贴即可看到运行结果_第1张图片

  • 拿到 $children / $parent 即可访问子 / 父 组件的所有变量和方法。
  • 官方说 $children / $parent 仅作为应急的通信方法,其中一个原因就是 $children / $parent仅代表的是根组件下的第一个子/父vue组件(普通html标签不含有vue实例,不包含在内),当位置变化或者之间需要增加新的组件,对应的指向就变了,如以下例子。
  • 一般用在组件简单且不易改变的情形,单独把子组件放在根组件的下一级。
  • 使用实例(复制粘贴即可跑起来看效果):
// 子组件
// 1.创建子组件
<template>
  <div>
    <!-- 注意:template中没有this,这里没有this,即不用this.parentMsg -->
    我是子组件,父组件的数据:{{parentMsg}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "children",
      parentMsg:""
    };
  },
  mounted(){
  	console.log(this.$parent)
    this.parentMsg = this.$parent.msg
  }
};
</script>

<style scoped>
</style>
// 父组件
<template>
  <!-- 4.使用 -->
  <div>
    <div class="main">我是父组件,子组件的数据:{{childrenMsg}}</div>
    <!-- 单独放在根组件的下一级,保证层级关系不被影响 -->
    <p-com></p-com>
  </div>
</template>

 <script>
// 2.引入
import pCom from "./pCom";

export default {
  components: { pCom }, // 3.挂载
  data() {
    return {
      msg: "parent",
      childrenMsg: ""
    };
  },
  mounted() {
  	console.log(this.$children)
    this.childrenMsg = this.$children[0].msg;
  }
};
</script>

<style scoped>
</style>

两个vue文件放在同一目录下即可运行。
中间需要间插入el组件时,父子关系变为子孙,获取数据失败:

// 父组件模板改为此
<template>
  <!-- 4.使用 -->
  <div>
    <div class="main">我是父组件,子组件的数据:{{childrenMsg}}</div>
    <!-- 单独放在根组件的下一级,保证层级关系不被影响 -->
    <el-card>
      <p-com></p-com>
    </el-card>
  </div>
</template>

然而插入非element组件(即html标签),则父子关系不变:

// 父组件模板改为此
<template>
  <!-- 4.使用 -->
  <div>
    <div class="main">我是父组件,子组件的数据:{{childrenMsg}}</div>
    <!-- 单独放在根组件的下一级,保证层级关系不被影响 -->
    <div>
      <p-com></p-com>
    </div>
  </div>
</template>

二、props / $emit

官方推荐的父子关系通信方式,不用在乎层级关系,而且没有多余数据传输,父组件给什么,子组件就拿什么、用什么。(原理也是监听和广播,后第三种方式一样,只不过这是局部的,别忘了@是v-on的省略)。props应该也可以放函数地址然后子组件调用,如果可以的话也可以替代emit(待测)。
父组件:

<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实例),看到所有的监听事件,但并不知道事件谁用了,在哪用的,用来干什么,所以仅适合小规模开发,非父子组件交互较少场景,仅用来处理非父子组件间的通信。
使用:
1.封装一个bus
model下新建eventBus.js(一般是这个目录)
Vue.js中的8种组件间的通信方式;3个组件实例是前6种通信的实例,组件直接复制粘贴即可看到运行结果_第2张图片
内容

import Vue from 'vue'

var EmitData =  new Vue();
export default EmitData; // 暴露一个vue实例,统一监听、广播所有事件

2.父组件导入并且监听(非父子组件也如此)

<template>
  <!-- 4.使用 -->
  <div>
    父组件:
    <div class="main">
      我是父组件,我自己拿的子组件数据:{{childrenMsg}}
      <el-button type="text" @click="alertBox(true)">点我出弹框</el-button>
      <br />
      子组件主动给我更新的数据:{{childrenMsg2}}
      <div>广播更新时间:{{time}}</div>
    </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";
import eventBus from "@/model/eventBus.js";

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

    eventBus.$on("updateTime", time => {
      this.time = time;
    });
  }
};
</script>

<style scoped>
</style>

3.子组件导入并且广播(触发事件)(非父子组件也如此)

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

<script>
import eventBus from "@/model/eventBus.js";

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

<style scoped>
</style>

移除监听:

eventBus.$off('updateTime', {}) 

四、ref

如果在普通的 DOM 元素上使用ref,引用指向的就是 DOM 元素;如果用在element组件上,引用就指向组件vue实例,可以通过实例直接调用组件的方法、数据或 DOM 元素。
所以ref是单向的,父操作子的数据和方法。
使用:
给子组件注入ref=“xx”,之后xx就是这个子组件的实例了(在this.$refs.xx调用时要注意他是最后加载的,一般为了确保加载完成可以使用setTimeout或者this.$nextTick(()=>{this.$refs.xx}))
子组件不用变,父组件增加ref

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

export default {
  components: { pCom }, // 3.挂载
  data() {
    return {
      msg: "parent",
      childrenMsg: "",
      childrenMsg2: "",
      time: ""
    };
  },
  methods: {
    alertBox(flag) {
      alert(`调用了${flag ? "自己" : "爸爸"}的弹框`);
    },
    setMsg(msg) {
      this.childrenMsg2 = msg;
    },
    getChild(){
      alert("子组件msg:"+this.$refs.pCom.msg+" ;并且更新自己的时间")
      this.$refs.pCom.updateParentTime()
    }
  },
  mounted() {
    console.log(this.$children);
    this.childrenMsg = this.$children[1].msg;

    eventBus.$on("updateTime", time => {
      this.time = time;
    });
  }
};
</script>

<style scoped>
</style>

五、provide / reject

provide/ inject 是vue2.2.0新增的api,在组件多层嵌套的时候,根组件只要通过provide来提供变量, 然后任意子组件(孙组件、重孙等等)中通过inject来注入变量(注入this中)即可拿到根组件数据、方法。不局限于只能从当前父组件的props属性中获取数据、方法。由此可知,provide / reject是单向的,只提供子孙等组件获取根组件数据、方法。
父组件:

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

export default {
  components: { pCom }, // 3.挂载
  data() {
    return {
      msg: "parent",
      childrenMsg: "",
      childrenMsg2: "",
      time: ""
    };
  },
  provide() {
    return {
      rootMsg: this.msg,
      rootAlertBox: this.alertBox
    };
  },
  methods: {
    alertBox(flag) {
      alert(`调用了${flag ? "自己" : "爸爸"}的弹框`);
    },
    setMsg(msg) {
      this.childrenMsg2 = msg;
    },
    getChild() {
      alert("子组件msg:" + this.$refs.pCom.msg + " ;并且更新自己的时间");
      this.$refs.pCom.updateParentTime();
    }
  },
  mounted() {
    console.log(this.$children);
    this.childrenMsg = this.$children[1].msg;

    eventBus.$on("updateTime", time => {
      this.time = time;
    });
  }
};
</script>

<style scoped>
</style>

子组件:

<template>
  <div>
    <!-- 注意:template中没有this,这里没有this,即不用this.parentMsg -->
    我是子组件,我自己拿的父组件数据:{{parentMsg}}
    <br />
    爸爸用props传给我的信息:{{parentMsg2}}
    (备注:{{memo}}<el-button type="text" @click="useParentMethods">点我出弹框,并且修改爸爸的数据</el-button>
    <el-button @click="updateParentTime">点我更新时间</el-button>
    <el-button @click="userPJ()">点我看看provide / reject有没有获取到</el-button>
  </div>
</template>

<script>
import eventBus from "@/model/eventBus.js";

export default {
  props: ["parentMsg2", "memo"],
  data() {
    return {
      msg: "children",
      parentMsg: ""
    };
  },
  inject: {
    rootMsg: { default: "获取根组件数据失败" },
    rootAlertBox: {
      default: () => {
        return "获取根组件函数失败";
      }
    }
  },
  methods: {
    useParentMethods() {
      this.$emit("alertBox", false);
      this.$emit("setParentMsg", `看你还嚣张! ${Date().split(" ")[4]}`);
    },
    updateParentTime() {
      eventBus.$emit("updateTime", Date().split(" ")[4]);
    },
    userPJ(){
      alert(this.rootMsg)
      this.rootAlertBox()
    }
  },
  mounted() {
    console.log(this.$parent);
    this.parentMsg = this.$parent.msg;
  }
};
</script>

<style scoped>
</style>

六、$attrs / $listeners

在vue2.4中,引入了$attrs 和$listeners , 新增了inheritAttrs 选项。

inheritAttrs:默认值true,继承所有的父组件属性(除props的特定绑定)作为普通的HTML特性应用在子组件的根元素上,如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承(简单的说,inheritAttrs:true 继承除props之外的所有属性;inheritAttrs:false 只继承class属性)

$attrs–继承所有的父组件属性(除了prop传递的属性、class 和 style ),一般用在子组件的子元素上,如第一个例子的

$listeners–属性,它是一个对象,里面包含了作用在这个组件上的所有监听器,你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。(相当于子组件继承父组件的事件)
实现:

1.同级创建pCom的子组件ppCom

<template>
  <el-button @click="runGrand()">点我调用 attrs / listeners</el-button>
</template>
<script>
export default {
  methods: {
    runGrand() {
      alert(this.$attrs.noProp);
      this.$listeners.alertBox(false);
    }
  },
  mounted() {
    console.log(this.$attrs);
    console.log(this.$listeners);
  }
};
</script>

2.pCom

<template>
  <div>
    <!-- 注意:template中没有this,这里没有this,即不用this.parentMsg -->
    我是子组件,我自己拿的父组件数据:{{parentMsg}}
    <br />
    爸爸用props传给我的信息:{{parentMsg2}}
    (备注:{{memo}}<el-button type="text" @click="useParentMethods">点我出弹框,并且修改爸爸的数据</el-button>
    <el-button @click="updateParentTime">点我更新时间</el-button>
    <el-button @click="userPJ()">点我看看provide / reject有没有获取到</el-button>
    <!-- 
      attrs:在模板外需要用this.$attrs获取,他包含了父组件的所有数据
      listeners:在模板外需要用this.$listeners获取,他包含了父组件的所有事件(监听)
      inheritAttrs - 默认true:
        inheritAttrs:true 子标签继承除props之外的所有特性;inheritAttrs:false 只继承class属性
      传给下一级,注入到他的this-->
    <br />
    pCom的子组件:
    <my-ppcom v-bind="$attrs" v-on="$listeners" ></my-ppcom>
  </div>
</template>

<script>
import eventBus from "@/model/eventBus.js";
import ppCom from "./ppCom"

export default {
  props: ["parentMsg2", "memo"],
  components:{"my-ppcom":ppCom},
  data() {
    return {
      msg: "children",
      parentMsg: ""
    };
  },
  inject: {
    rootMsg: { default: "获取根组件数据失败" },
    rootAlertBox: {
      default: () => {
        return "获取根组件函数失败";
      }
    }
  },
  methods: {
    useParentMethods() {
      this.$emit("alertBox", false);
      this.$emit("setParentMsg", `看你还嚣张! ${Date().split(" ")[4]}`);
    },
    updateParentTime() {
      eventBus.$emit("updateTime", Date().split(" ")[4]);
    },
    userPJ(){
      alert(this.rootMsg)
      this.rootAlertBox()
    }
  },
  mounted() {
    console.log(this.$parent);
    this.parentMsg = this.$parent.msg;
  }
};
</script>

<style scoped>
</style>

3.父组件

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

export default {
  components: { pCom }, // 3.挂载
  data() {
    return {
      msg: "parent",
      childrenMsg: "",
      childrenMsg2: "",
      time: ""
    };
  },
  provide() {
    return {
      rootMsg: this.msg,
      rootAlertBox: this.alertBox
    };
  },
  methods: {
    alertBox(flag) {
      alert(`调用了${flag ? "自己" : "爸爸"}的弹框`);
    },
    setMsg(msg) {
      this.childrenMsg2 = msg;
    },
    getChild() {
      alert("子组件msg:" + this.$refs.pCom.msg + " ;并且更新自己的时间");
      this.$refs.pCom.updateParentTime();
    }
  },
  mounted() {
    console.log(this.$children);
    this.childrenMsg = this.$children[1].msg;

    eventBus.$on("updateTime", time => {
      this.time = time;
    });
  }
};
</script>

<style scoped>
</style>

七、localStorage / sessionStorage

通信比较简单,数据和状态比较混乱,不太容易维护。
localStorage 将数据存入浏览器,关闭浏览器再次打开仍然存在,需要手动清除;
sessionStorage将数据存在对话框,关闭这个页面就没了。
他们的操作几乎是一样的,也都是js内置方法,也可以自己封装以下(我的另一篇博客有封装localStorage vue项目将token存在(vuex)store和localstorage中)。使用原生的话注意每次存入要JSON格式化,拿出要JSON解析。

localStorage 使用:

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

八、Vuex

数据状态管理器,适用于数据复杂、交互频繁场景,选择时要在不使用vue的困难和使用vuex的繁琐中权衡,当然啦,不管用不用都应该拿个例子来学,见我的另一篇博客
Vue使用Vuex一步步封装并使用store

你可能感兴趣的:(vue,前端,组件)