vue2.x中$attrs的使用方法教程

 更新时间:2022年11月23日 14:55:37   作者:Geek喜多川  
正常情况下Vue推荐用props向子组件参数,但是在特定场景下,使用$attrs会更方便,下面这篇文章主要给大家介绍了关于vue2.x中$attrs使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

最近笔者在做大屏项目的时候,由于组件数据传递,一层传递一层,使用vuex或者pinia又显得过于笨重。故而想起了那个传说中的v-bind="$attrs"以及v-on="$listeners",下面就来聊下使用:

上图组件之间的关系如下:

  • ComponentGrandParent为最外层父级组件(爷)

  • ComponentParent为中间层父级组件(父)

  • ComponentChild为子组件

ComponentGrandParent组件想把props传递给ComponentChild就通常需要在ComponentParent中通过属性一个个的传递

//ComponentParent组件
<template>
  <ComponentChild :propa="prop1"
                  :propb="prop2"
                  :propc="prop3"
                  ...
  />
</template>

如果需要传递的属性多,而且ComponentParent中没有用到的ComponentGrandParent传递过来的属性的时候,就很尴尬,很不优雅,有时候还需要在写watch监听传递过来的数据,然后再赋值给data中的prop1,然后再传递给ComponentChild

使用$attrs能解决上述问题,那么什么是$attrs呢?

透传 Attributes 是指由父组件传入,且没有被子组件声明为props或是组件自定义事件的 attributes 和事件处理函数。默认情况下,若是单一根节点组件,$attrs 中的所有属性都是直接自动继承自组件的根元素。

大白话讲就是没有父组件传递过来的props,在子组件中没有对应的props声明,那么在子组件中就可以通过v-on:$attrs将父组件的props透传给孙组件,在二次封装一些elementui的组件有奇效

纸上得来终觉浅,下面来看下实际的使用,目录结构如下:

src
├─ blocks
│ └─ PassVal
│ ├─ components
│ │ └─ PassInput.vue
│ └─ PassVal.vue
├─ view
│ ├─ basic
│ │ └─ BasicView.vue
├─ App.vue
└─ main.js

  • BasicView.vue(父组件)中引入PassVal.vue(子组件)
  • PassVal.vue(子组件)中引入PassInput.vue(孙组件)
//BasicView.vue代码如下:

<template>
  <div class="basic">
    <h3><i class="title_icon"></i>基础知识</h3>
    <PassVal
      placeholder="我是placerholder"
      :clearable="true"
      :defaultVal="defaultVal"
      @changGrandChildVal="changGrandChildVal"
    />
  </div>
</template>

<script>
import PassVal from "@/blocks/PassVal/PassVal.vue";
export default {
  data() {
    return {
      defaultVal: "测试透传",
    };
  },
  components: {
    PassVal,
  },
  methods: {
    /**
     * @function input值修改回调函数
     */
    changGrandChildVal(val) {
      console.log("PassInput组件的值变了", val);
    },
  },
};
</script>

<style scoped>
.basic {
  width: 100%;
  height: 100%;
}
</style>
  • PassVal想要传递三个属性placeholder="我是placerholder":clearable="true"以及:defaultVal="defaultVal"

接着来看下在PassVal中的处理:

//PassVal.vue
<template>
  <div class="passval">
    <el-divider content-position="left">1-$attr和 $listeners</el-divider>
    <div class="container">
      <div class="flex-two">
        <passInput v-bind="$attrs" v-on="$listeners"></passInput>
      </div>
    </div>
  </div>
</template>

<script>
import PassInput from "./components/PassInput.vue";
export default {
  components: {
    PassInput,
  },
  props: {
    defaultVal: {
      type: String,
      default: "输入框默认值",
    },
  },
};
</script>

<style scoped>
.passval {
  width: 100%;
  height: 100%;
}
</style>
  • 这里通过v-bind="$attrs"v-on="$listeners"将属性和方法透传下去
  • 如果在PassVal.vue中有关于来自父组件BasicView.vue相关的props声明,那么v-bind="$attrs"透传的属性会将声明的这个属性剔除,透传余下的porps属性。
    • 例如:如果在PassVal.vue中的props中声明defaultVal,那么父组件BasicView.vue传递过来的defaultVal将无法通过v-bind="$attrs"透传给子组件PassInput.vue

而在PassInput.vue组件中

<template>
  <div class="pass-input">
    <el-input v-bind="$attrs" v-model="value" @input="inputHandler"></el-input>
  </div>
</template>

<script>
export default {
  name: "PassInput",
  created() {
    console.log("我是$attrs", this.$attrs);
    console.log("我是$listeners", this.$listeners);
  },
  data() {
    return {
      value: "",
    };
  },
  methods: {
    /**
     * @function el-input的输入回调函数
     */
    inputHandler(val) {
      this.$emit("changGrandChildVal", val);
    },
  },
};
</script>

<style scoped>
.pass-input {
  width: 100%;
  height: 100%;
}
</style>

从而实现了优雅的属性透传,在组件封装中比较有用。

生命周期中的console.log("我是$attrs", this.$attrs)和console.log("我是$listeners", this.$listeners);以结果如下:

总结

到此这篇关于vue2.x中$attrs使用的文章就介绍到这了,更多相关vue2.x $attrs使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • Vue中props用法介绍

    Vue中props用法介绍

    这篇文章主要给大家分享的是 Vue中props用法介绍,​ 在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,下面我们一起进入文章看看内容的详细介绍吧,需要的朋友也可以参考一下
    2021-11-11
  • Vue树表格分页的实现方法详解

    Vue树表格分页的实现方法详解

    这篇文章主要介绍了Vue树表格分页的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-10-10
  • vue实现滚动底部加载下一页指令的示例代码

    vue实现滚动底部加载下一页指令的示例代码

    vue中监控滚动事件可以直接在mounted中绑定滚动事件,然后在销毁前解绑滚动事件,本文通过实例代码介绍vue实现滚动底部加载下一页指令的过程,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • 使用kbone解决Vue项目同时支持小程序问题

    使用kbone解决Vue项目同时支持小程序问题

    这篇文章主要介绍了使用kbone解决Vue项目同时支持小程序问题,本文通过一个todo的例子跟大家详细介绍,需要的朋友可以参考下
    2019-11-11
  • vue实现纯前端表格滚动分页加载

    vue实现纯前端表格滚动分页加载

    这篇文章主要为大家详细介绍了vue实现纯前端表格滚动分页加载,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 对类Vue的MVVM前端库的实现代码

    对类Vue的MVVM前端库的实现代码

    这篇文章主要介绍了对类Vue的MVVM前端库的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • 为Vue3 组件标注 TS 类型实例详解

    为Vue3 组件标注 TS 类型实例详解

    这篇文章主要为大家介绍了为Vue3 组件标注 TS 类型实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • vue+vux vux安装出现错误问题及解决

    vue+vux vux安装出现错误问题及解决

    这篇文章主要介绍了vue+vux vux安装出现错误问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue提供的三种调试方式你知道吗

    Vue提供的三种调试方式你知道吗

    这篇文章主要为大家介绍了Vue提供的三种调试方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • vue项目中轮询状态更改方式(钩子函数)

    vue项目中轮询状态更改方式(钩子函数)

    这篇文章主要介绍了vue项目中轮询状态更改方式(钩子函数),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论