问题形容

  • vuex

    • 对于vuex，笔者之前写过一篇文章。链接附上：https://segmentfault.com/a/11...

  • vue实例bus事件

    • vue实例bus其实不仅仅能够用在祖孙组件间通信，也能够用在兄弟组件间通信，应用范畴还是挺宽泛的，对于vue实例bus的用法，笔者之前也写过一篇文章，是以兄弟组件间通信为例的。链接附上：https://segmentfault.com/a/11...

  • $attrs和$listeners

    • 这种形式也还能够的，请持续往下浏览

官网定义$attrs和$listeners

咱们先看一下官网是如何定义的，截图奉上：

官网地址也附上吧 https://cn.vuejs.org/v2/api/?...

吐槽一下，官网的定义稍微有些艰涩难懂。上面咱们将结合实际的例子，来解释$attrs和$listeners的用法。所以咱们须要先搭建一个我的项目，构造就是祖孙组件数据传递

我的项目构造

我的项目结构图


咱们晓得我的项目的最外层的vue组件就是App.vue组件，咱们把App.vue组件当做爷组件、而对应fu.vue就是父组件，同时sun.vue就是孙子组件。也就是爷、父、子的这种祖孙关系组件。咱们在这样的构造中去实现爷组件到孙子组件中的数据传递。

$attrs的用法

$attrs我的了解就是：

  • 失常状况下：父组件通过v-bind绑定一个数据传递给子组件，子组件通过props接管到就能够在子组件的html中应用了。然而，如果父组件v-bind传递给子组件，子组件没有用props接管呢？
  • 留神：这个时候，父组件传递过去的数据就会被挂载(赋值)到这个子组件自带的对象$attrs下面，所以:
  • $attrs就是一个容器对象，这个容器对象会寄存:父组件传过来的且子组件未应用props申明接管的数据

代码层面了解

咱们应用上述搭建的我的项目，把App.vue当做父组件，fu.vue当做子组件。（实际上，我的项目中这二者别离是爷组件、父组件，不过爷父组件，其实也是父子组件的关系，也能够用）
爷组件代码
在爷组件中，咱们给父组件传递4个数据，msg1、msg2、msg3、msg4，其数据类型别离是字符串、字符串、数组、对象

<template>  <div id="app">    我是爷组件    <fu      :msg1="msg1"      :msg2="msg2"      :msg3="msg3"      :msg4="msg4"    ></fu>  </div></template><script>import fu from "./views/fu.vue";export default {  components: {    fu,  },  data() {    return {      msg1: "孙悟空",      msg2: "猪八戒",      msg3: ["白骨精", "玉兔精", "狐狸精"],      msg4: {        name: "炎帝萧炎",        book: "斗破天穹",      },    };  },};</script><style lang="less" scoped>#app {  width: 950px;  height: 600px;  box-sizing: border-box;  border: 3px dashed #e9e9e9;  background-color: #cde;  margin: 50px;}</style>

父组件代码
在父组件中咱们只在props中接管msg1，另外三个咱们不在props中接管。于是另外三个未在props中接管的，会主动被寄存在$attrs这个容器对象中去。同时，咱们通过$attrs对象也能够拿到对应的爷组件中传递过去的，未在props中接管的数据值，也能够在html中应用。

<template>  <div class="fatherClass">    我是父组件    <h2>{{ msg1 }}</h2>    <h2>{{ $attrs.msg2}}</h2>    <h2>{{ $attrs.msg3}}</h2>    <h2>{{ $attrs.msg4}}</h2>  </div></template><script>export default {  name: "DemoFather",  props: {    msg1: {      type: String,      default: "",    },  },  mounted() {    console.log('fu组件实例',this);  },};</script><style lang="less" scoped>.fatherClass {  width: 850px;  height: 400px;  background-color: #baf;  margin-left: 50px;  margin-top: 50px;}</style>

咱们先看一下上述爷父组件代码最终的效果图：

确实是fu.vue组件中未在props中申明接管的爷组件传递过去的数据，都寄存在$attrs这个对象外面了。为了更直观的看到成果，咱们能够在mounted钩子中打印this组件实例，在这个实例上，咱们也能够看到$attrs中的寄存的数据。打印效果图如下：

由此，验证了上述那句话：
$attrs就是一个容器对象，这个容器对象会寄存:父组件传过来的且子组件未应用props申明接管的数据
那这个和咱们的祖孙组件之间的数据传递有关系吗？
有关系，关系很大！

爷组件传递给孙组件的逻辑流程

其实，爷组件传递给孙组件的逻辑流程就是，通过爷组件首先传递给父组件，当然父组件不在props中接管，那么爷组件传递给父组件的数据就会寄存到父组件的$attrs对象中外面了，而后，再通过v-bind="$attrs"，再把这个$attr传递给孙组件，在孙组件中应用props就能接管到$attrs中的数据了，这样就实现了，祖孙之间的数据传递

祖孙之间的数据传递，须要通过两头的父组件$attrs做一个桥梁。其实就是这个意思。

再加一个孙组件

<template>  <div class="sunClass">    我是孙子组件    <h2>接管爷组件数据:-->{{ msg2 }}</h2>    <h2>接管爷组件数据:-->{{ msg3 }}</h2>    <h2>接管爷组件数据:-->{{ msg4 }}</h2>  </div></template><script>export default {  // $attrs个别搭配interitAttrs 一块应用  inheritAttrs: false, // 默认会继承在html标签上传递过去的数据，相似href属性的继承  /*    孙子组件通过props，就能接管到父组件传递过去的$attrs了，就能拿到外面的数据了，也就是：    爷传父、父传子。即：祖孙之间的数据传递。  */   props: {    msg2: {      type: String,      default: "",    },    msg3: {      type: Array,      default: () => {        return [];      },    },    msg4: {      type: Object,      default: () => {        return {};      },    },  },  name: "DemoSun",};</script><style lang="less" scoped>.sunClass {  width: 750px;  height: 180px;  background-color: #bfa;  margin-top: 80px;  margin-left: 50px;}</style>

祖传孙最终效果图


呐，祖传孙实现啦...

$attrs个别搭配interitAttrs 一块应用，个别是inheritAttrs: false, // 默认会继承在html标签上传递过去的数据.这个大家审查一下DOM元素就能看到了。

$listeners的用法

应用$listeners能够实现孙组件的数据传递到爷组件中去，逻辑的话，也是用在两头的桥梁父组件下面去，我的了解就是$listeners能够将子组件emit的办法告诉到爷组件。代码如下：

第一步，在两头的父组件中加上$listenners

<sun v-bind="$attrs" v-on="$listeners"></sun>

第二步，爷组件中定义事件办法

<template>  <div id="app">    我是爷组件    <h3>{{ fromSunData }}</h3>    <fu :msg1="msg1" :msg2="msg2" :msg3="msg3" :msg4="msg4"         @fromSun="fromSun">    </fu>  </div></template><script>import fu from "./views/fu.vue";export default {  components: {    fu,  },  data() {    return {      msg1: "孙悟空",      msg2: "猪八戒",      msg3: ["白骨精", "玉兔精", "狐狸精"],      msg4: {        name: "炎帝萧炎",        book: "斗破天穹",      },      fromSunData: "",    };  },  methods: {    fromSun(payload) {      console.log("孙传祖", payload);      this.fromSunData = payload;    },  },};</script>

比方这里定义一个fromSun的事件办法，可供孙组件emit触发。

第三步，孙组件去触发爷组件的事件办法即可

<template>  <div class="sunClass">    我是孙子组件    <h2>接管爷组件:-->{{ msg2 }}</h2>    <h2>接管爷组件:-->{{ msg3 }}</h2>    <h2>接管爷组件:-->{{ msg4 }}</h2>    <el-button size="small" type="primary" plain @click="sendToZu">孙传祖</el-button>  </div></template><script>export default {  // $attrs个别搭配interitAttrs 一块应用  inheritAttrs: false, // 默认会继承在html标签上传递过去的数据，相似href属性的继承  props: {    msg2: {      type: String,      default: "",    },    msg3: {      type: Array,      default: () => {        return [];      },    },    msg4: {      type: Object,      default: () => {        return {};      },    },  },  name: "DemoSun",  data() {    return {      data: "来自孙组件的数据",    };  },  methods: {    sendToZu() {      // 孙组件可能触发爷组件的fromSun办法的起因还是因为父组件中有一个$listeners作为中间人，去转发这个事件的触发      this.$emit("fromSun", this.data);    },  },};</script>

比方这里咱们在孙组件中点击按钮，将孙组件中的数据传递到爷组件中去。

孙传祖效果图

总结

好忘性不如烂笔头，记录一下吧。欢送各位大佬批评指正，顺带关个注，点个赞，激励一下呗。嘿嘿