vue里的$attrs

2023-11-10

$attrs官网介绍

关于$attrs, vue官网如是介绍:

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。

$attrs大白话介绍

attrs就是属性的意思即attribute, js的setAttribute, getAttribute听过把,jq$().attr有用过吧,他们是用来设置啥的?不就是设置类似于title, data-x, src这类的属性么,由此延伸,大概可知道vue实例里的this.$attrs是啥了。
再来,如有一个父组件是这样的:

<father :age="age" :sex="sex" title="ohNo" data-height="100"></father>

如上,很明显age, sex在子组件中可通过props来接受这些值,这就完成可父组件向子组件传值,可注意,这时候props可拿不到像titledata-height的值,这时候在子组件打印this.$attrs,你会发现是这样子的:
在这里插入图片描述
这样子就可以拿到这些属性值啦,值得注意的是,class跟style不属于属性值。

$atrrs深传递

如果有这样一种情况呢,子组件可以通过this.$attrs的拿到父组件的属性值,然后孙组件呢,如果在子组件上面没有定义属性,在孙组件里打印this.$attrs其实是个控制,为啥?因为子组件没定义属性啊,相要在孙组件乃至更深层的后代里拿到父组件的属性值,可以在相应子组件里通过v-bind="$attrs"即可传递父组件的属性值至下一代子组件,若要继续往下传递,相应字组件也要添加v-bind="$attrs"
如:
父组件

<father :age="age" :sex="sex" title="ohNo" data-height="100"></father>

子组件

<child v-bind="$attrs"></child>

这里this.$attrs是{data-height: "45", title: "ohNo"}

孙组件

 <boy  v-bind="attrs"></boy>

这里this.$attrs{data-height: "45", title: "ohNo"},如果子组件没有加v-bind="$attrs",这里打印this.$attrs为空对象

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue里的$attrs 的相关文章

  • 文献计量三大定律之一---洛特卡定律及普赖斯定律

    科学生产率是洛特卡定律的基础 科学生产率 Scientific Productivity 是指科学家 科研人员 在科学上所表现出的能力和工作效率 通常用其生产的科学文献的数量来衡量 1926年 洛特卡在一篇论文中提出了科学生产率的频次分布规

随机推荐

  • CentOS 7升级gcc/CentOS 7 yum 安装gcc

    centos7自带的gcc版本是4 8 手动升级安装很锻炼 毕竟已经0202年了 devtoolset 7 Developer Toolset is designed for developers working on CentOS or
  • phpmyadmin打不开500错误

    phpmyadmin打不开500错误 提示500错误 可以去掉友好提示 显示出具体错误 我处理的时候显示的具体错误是白页现象 解决方案 给上级目录一个users写入权限即可 如直接在某个磁盘下 可以给它新建一个上级目录放进去 ps 很多ph
  • c语言指令 mul bl,MUL是进行无符号乘法的指令

    MUL 无符号乘法 指令有三种格式 第一种是将8位的操作数于al相乘 第二种是将16位的操作数与ax相乘 第三种是将32位的操作数与eax进行相乘 乘数和被乘数大小必须相同 乘积的尺寸是乘数 被乘数大小的两倍 三种格式都既接受寄存器操作数
  • 【C语言实现简单数据结构】单链表

    C语言实现简单数据结构 单链表 心有所向 日复一日 必有精进 文章目录 C语言实现简单数据结构 单链表 前言 链表 1 1链表的概念和结构 1 2链表的分类 1 3单链表的实现 1 3 1接口实现 1 3 2动态申请一个结点 1 3 3单链
  • 【Linux】文件目录操作指令(pwd、ls、cd、mkdir、rmdir、touch、cp、rm、mv、cat、echo、tail等)

    目录 1 指定运行级别 1 1 基本介绍 1 2 应用实例 2 帮助指令 2 1 man获得帮助信息 2 2 help指令 3 文件目录类 3 1 pwd指令 3 2 ls指令 3 3 cd指令 3 4 mkdir指令 3 5 rmdir指
  • sort自定义排序方式

    2022 05 14 sort 方式1 结构体内重载运算符 方式2 cmp参数 与优先队列类比 Java和python的处理方式 Java python sort sort a begin a end sort a a n n为数组长度 通
  • C/C++Unix网络编程-IPC简介

    IPC是进程间通信的简称 进程 线程与信息共享 Unix进程间的信息共享的方式 1 左边的两个进程共享存留于文件系统中某个文件上的某些信息 为访问这些信息 每个进程都得穿越内核 例如read write lseek等 当一个文件有待更新时
  • Hadoop MapReduce执行过程详解(带hadoop例子)

    为什么80 的码农都做不了架构师 gt gt gt 分析MapReduce执行过程 MapReduce运行的时候 会通过Mapper运行的任务读取HDFS中的数据文件 然后调用自己的方法 处理数据 最后输出 Reducer任务会接收Mapp
  • UE4_模型_Bound(边界)

    放置在关卡中的每个Actor都有一个bound bound由两部分组成 蓝色的长方体和黄色的球体 Bound是专门用来测试一个物体是否可见的 边界球用于通过简单的距离测试进行快速碰撞检测 而且 通常情况下 它的大小大于它包含的对象 另一方面
  • 逻辑左移、逻辑右移、算术左移、算术右移、循环左移、循环右移的学习

    逻辑左移时 最高位丢失 最低位补0 逻辑右移时 最高位补0 最低位丢失 算术左移时 依次左移一位 尾部补0 最高的符号位保持不变 算术右移时 依次右移一位 尾部丢失 符号位右移后 原位置上复制一个符号位 循环左移时 将最高位重新放置最低位
  • Vue promise的用法

    1 promise是什么 它可以说是异步编程的一种解决方法 就拿传统的ajax发请求来说 单个还好 如果是一个请求回来的数据还要被其他请求调用 不断地嵌套 可想而知 代码看起来是很乱的 promise主要是为了解决这种情景而出现的 2 简单
  • 山东科技大学oj题库1165 打印金字塔 之一

    include
  • vs查看宏展开

    宏在我们的代码中能经常给我们带来很大的便利 但是有些宏会造成意向不到的错误 能够查看宏展开就能够查看宏错误的根源 VS2008对编译是不保存预处理的文件信息的 而宏展开的信息就是在预编译阶段 如下图 工程属性 配置属性 c c 预处理器 生
  • 【数据分析】数据分析方法(七):AARRR 模型分析 & 漏斗分析

    数据分析方法 七 AARRR 模型分析 漏斗分析 1 AARRR 模型分析方法 如果把产品看作一个鱼塘 使用产品的用户看作鱼塘里的鱼 AARRR 模型的五个环节可以描述如下 获取用户 Acquisition 想办法给鱼塘里添加新的鱼 从而扩
  • vue注册自定义指令

    src 新建文件夹directive directive下新建modules文件夹 里面存放指令js文件 新建prevetMultiClick jk 防按钮多次重复点击的指令 export default inserted el bindi
  • python open3d点云可视化(本节会根据实际所用持续更新)

    本文为博主原创文章 未经博主允许不得转载 本文为专栏 python三维点云从基础到深度学习 系列文章 地址为 https blog csdn net suiyingy article details 124017716 为了便于加强对点云数
  • 基于cocos2d-x的2D空间中的OBB(Orient Bounding Box)碰撞检测算法

    引言 最近在与好友聊天的过程中 好友问我如何实现类似这样的游戏 它主要想知道 如何检测旋转过后的物体与其他物体之间的碰撞 我们知道 在没有旋转的情况下 对于这样的方块 比较规则的物体 我们完全可以使用AABB Axie Align Bond
  • Docker容器安装启动以及基本指令

    Docker使用步骤 一 ubuntu安装Docker 更新ubuntu的apt源索引 sudo apt get update 安装包允许apt通过HTTPS使用仓库 sudo apt get install apt transport h
  • 《零基础入门学习python》学习过程(四)

    学习时间 2017 09 19 第14课 元组 知识点汇总 元组和列表最本质的区别就是元组是封闭的列表 它一旦定义就不可修改 不可插入或删除任意一个元素等操作 创建和访问一个元组 gt gt gt tuple2 创建一个空元组 gt gt
  • vue里的$attrs

    attrs官网介绍 关于 attrs vue官网如是介绍 包含了父作用域中不作为 prop 被识别 且获取 的特性绑定 class 和 style 除外 当一个组件没有声明任何 prop时 这里会包含所有父作用域的绑定 class 和 st