$attrs

news2024/9/22 9:55:17

一、概念

vue官网定义如下:

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

二、用处

vue中一个比较令人烦恼的事情是属性只能从父组件传递给子组件。这也就意味着当你想向嵌套层级比较深组件数据传递,只能由父组件传递给子组件,子组件再传递给孙子组件。

常用的几个组件之间数据传递的方法有如下几个:

1、通过 props 的方式向子组件传递(父子组件)

2、vuex 进行状态管理

3、非父子组件的通信传递 Vue Event Bus,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递

4、$attrs的方式

三、示例

在vue中新建三个组件,分别为父组件(Father),子组件(Son)和孙子组件(Grandson)。
在这里插入图片描述

父组件(Father)的代码如下:

<template>
    <div style="background: aquamarine">
        <div>Here is Father</div>
        <son :sonAge=20 :grandsonAge=10

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1464425.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【高德地图】Android高德地图控件交互详细介绍

&#x1f4d6;第5章 与地图控件交互 ✅控件交互&#x1f9ca;缩放按钮&#x1f9ca;指南针&#x1f9ca;定位按钮&#x1f9ca;地图Logo ✅手势交互&#x1f9ca;缩放手势&#x1f9ca;滑动手势&#x1f9ca;旋转手势&#x1f9ca;倾斜手势&#x1f9ca;指定屏幕中心点的手势操…

无线传感器网络简单介绍

&#xff08;本文为简单介绍&#xff0c;内容来源自网络&#xff09; 无线传感器网络&#xff08;Wireless Sensor Networks&#xff09;是一种创新的传感器网络架构&#xff0c;具有广泛的应用前景和潜力。与传统的有限传感器网络不同&#xff0c;无线传感器网络克服了节点数…

在苹果电脑MAC上安装Windows10(双系统安装的详细图文步骤教程)

在苹果电脑MAC上安装Windows10&#xff08;双系统安装的详细图文步骤教程&#xff09; 一、准备工作准备项1&#xff1a;U盘作为系统安装盘准备项2&#xff1a;您需要安装的系统镜像 二、启动转换助理步骤1&#xff1a;找到启动转换助理步骤2&#xff1a;启动转换助理步骤3&…

基于springboot+vue的安康旅游网站(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

【Java EE初阶二十】http的简单理解(一)

1. 初识http HTTP 最新的版本应该是 HTTP/3.0&#xff0c;目前大规模使用的版本 HTTP/1.1&#xff1b; 下面来简单说明一下使用 HTTP 协议的场景: 1、浏览器打开网站 (基本上) 2、手机 APP 访问对应的服务器 (大概率) 前面的 TCP与UDP 和http不同&#xff0c;HTTP 的报文格式&a…

基于Embedding召回和DSSM双塔模型

文章目录 基于Embedding召回介绍基于Embedding召回算法分类I2I召回U2I召回 DSSM模型DSSM双塔模型层次 基于Embedding召回介绍 基于embedding的召回是从内容文本信息和用户查询的角度出发&#xff0c;利用预训练的词向量模型或深度学习模型&#xff0c;将文本信息转换成向量进行…

【PyQt】15-让控件支持拖拽工作

文章目录 前言一、控件的拖拽-setAcceptDrops()1.1 代码1.2 运行结果 总结 前言 允许控件的拖拽操作&#xff0c;后续可以升级为拖拽图片之类的。hasHtml()、hasUrls()、hasImage() 一、控件的拖拽-setAcceptDrops() 比如把A放到B&#xff0c;需要两步 B—setAcceptDrops(Tru…

Hudi程序导致集群RPC偏高问题分析

1、背景 Hudi程序中upsert操作频繁&#xff0c;过多的删除和回滚操作,导致集群RPC持续偏高 2、描述 hudi采用的是mvcc设计&#xff0c;提供了清理工具cleaner来把旧版本的文件分片删除&#xff0c;默认开启了清理功能&#xff0c;可以防止文件系统的存储空间和文件数量的无限…

【自然语言处理】:实验5,司法阅读理解

清华大学驭风计划课程链接 学堂在线 - 精品在线课程学习平台 (xuetangx.com) 代码和报告均为本人自己实现&#xff08;实验满分&#xff09;&#xff0c;只展示主要任务实验结果&#xff0c;如果需要详细的实验报告或者代码可以私聊博主 有任何疑问或者问题&#xff0c;也欢…

配置redis-cell 控流插件

1.下载绑定资源也可以到git上下载 https://gitee.com/dianjinshi/springboot-nginx.git 2.创建文件夹 mkdir redis-cell 3.上传到linux上并进入文件夹解压 4.拷贝 docker cp libredis_cell.so redis:/usr/local/etc/redis 5.重启redis docker restart redis 6.进入redis…

六、回归与聚类算法 - 欠拟合和过拟合

目录 1、定义 2、原因及解决方法 2.1 正则化 线性回归欠拟合与过拟合线性回归的改进 - 岭回归分类算法&#xff1a;逻辑回归模型保存与加载无监督学习&#xff1a;K-means算法 1、定义 2、原因及解决方法 2.1 正则化

【Emgu CV教程】7.3、图像锐化之手搓代码实现直方图均衡化

文章目录 一、介绍1.写在前面2.彩色图像直方图均衡化函数 二、举例 一、介绍 1.写在前面 上一篇文章介绍的是直方图均衡化&#xff0c;使用Emgu CV的EqualizeHist()函数。它对于背景和前景都太亮或者太暗的图像非常有用&#xff0c;而且计算速度非常快&#xff0c;简单又好用…

NXP实战笔记(七):S32K3xx基于RTD-SDK在S32DS上配置ICU输入捕获

目录 1、概述 2、输入捕获SDK配置 2.1、SAIC中断方式 2.2、IPWM或者IPM 1、概述 输入捕获&#xff0c;可以抓取高电平时间、低电平时间、占空比、周期、边沿检测与回调函数、边沿计数&#xff08;ABZ解码&#xff09;、时间戳、唤醒中断。 记录一下根据Emios模块实现上述部分…

论文精读--word2vec

word2vec从大量文本语料中以无监督方式学习语义知识&#xff0c;是用来生成词向量的工具 把文本分散嵌入到另一个离散空间&#xff0c;称作分布式表示&#xff0c;又称为词嵌入&#xff08;word embedding&#xff09;或词向量 Abstract We propose two novel model architec…

LeetCode 热题 100 | 二叉树(终)

目录 1 二叉树小结 1.1 模式一 1.2 模式二 2 236. 二叉树的最近公共祖先 3 124. 二叉树中的最大路径和 菜鸟做题&#xff08;返校版&#xff09;&#xff0c;语言是 C 1 二叉树小结 菜鸟碎碎念 通过对二叉树的练习&#xff0c;我对 “递归” 有了一些肤浅的理解。…

适用于 Windows 10、11 的 5 款最佳免费文件恢复软件

最好的免费文件恢复软件是什么&#xff1f; 如今&#xff0c;人们通常将数据保存在硬盘或云备份上。除此之外&#xff0c;您还可以将重要数据存储在 USB 或其他电子设备上。 但是&#xff0c;如果您遇到存储设备故障、存储设备逻辑故障或意外删除&#xff0c;您可能会丢失文件…

Android控件WebView实现完整截图

最近总能看到好多APP都支持文章和网页的长截图&#xff0c;出于好奇研究了一下&#xff0c;分享给大家。 网上有好多的例子&#xff0c;其中好多都是已经过时的就不在复述了&#xff0c;我发现有一种还是比较通用的方法。 //android 5.0 之后需要开启浏览器的整体缓存才能截取…

后端程序员入门react笔记(四)-综合运用,写一个小demo

样式模块化 有时候我们会遇到这样的问题&#xff0c;有两个css对一个class声明了样式&#xff0c;这样的话后引入的css会覆盖前面的css样式&#xff0c;导致样式冲突&#xff0c;那么我们怎么解决这种问题呢&#xff0c;我们可以使用样式的模块化&#xff0c;我们起名一个inde…

关于HashMap的面试问题(26问面试题)

文章目录 关于HashMap的面试问题1、HashMap的底层实现2、HashMap的数组的元素类型3、为什么要使用数组&#xff1f;4、HashMap的数组的初始化长度5、HashMap的映射关系的存储索引index如何计算6、HashMap 为什么使用 &按位与运算代替%模运算&#xff1f;7、为什么要使用has…

微服务篇之限流

一、为什么要限流 1. 并发的确大&#xff08;突发流量&#xff09;。 2. 防止用户恶意刷接口。 二、限流的实现方式 1. Tomcat限流 可以设置最大连接数&#xff0c;但是每一个微服务都有一个tomcat&#xff0c;实现起来非常麻烦。 2. Nginx限流 &#xff08;1&#xff09;控…