【vue】$attrs的作用和使用方法
阅读原文时间:2022年04月20日阅读:1

之前一直不了解$attrs的作用和使用场景,然后自己翻阅了相关资料整理了下,如有不对的地方请大家指教

  $attrs是vue版本2.40以上新增的属性;

  使用场景:

   vue项目里面,大家肯定遇到过组件之间的传值问题,父传子、子传父、非父子之间传值等等;

   假如说我们碰到一个多层组件之间的传值,可以用$emit、$on可以解决这个问题,但是操作太过于繁琐了,或者使用vuex也可以去实现,但是有点大材小用杀鸡用了宰牛刀。

   然后 $attrs 就是用来解决这个问题的!

     官方解释:

    $attr:包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,

    这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

   如果给组件传递的数据,组件不使用props接收,那么这些数据将作为组件的HTML元素的特性,这些特性绑定在组件的HTML根元素上
   inheritAttrs: false的含义是不希望本组件的根元素继承父组件的attribute,同时父组件传过来的属性(没有被子组件的props接收的属性),也不会显示在子组件的dom元素上,但是在组件里可以通过其$attrs可以获取到没有使用的注册属性, ``inheritAttrs: false`是不会影响 style 和 class 的绑定

  下面看实际用例(父组件的列表行数据传递给孙子组件展示):

  1. 父组件(Father.vue),给子组件关联数据,子组件如果不用props接收,那么这些数据就作为普通的HTML特性应用在子组件的根元素上

  2. 儿子组件(Child.vue),中间层,作为父组件和孙子组件的传递中介,在儿子组件中给孙子组件添加v-bind="$attrs",这样孙子组件才能接收到数据

  3. 孙子组件(GrandChild.vue),在孙子组件中一定要使用props接收从父组件传递过来的数据

    总结:当我们涉及到多层传参的时候,父组件传出去的值,中间的组件不用通过props接收,但是要在子组件(中间组件)身上通过v-bind="$attrs",这样最下层的组件才能拿到最外层组件传过来的值

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器