乐趣区

关于vue.js:详细讲解vue中祖孙组件间的通信之使用attrs和listeners的方式篇幅略长建议收藏

问题形容

  • 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>

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

孙传祖效果图

总结

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

退出移动版