非 Prop 的属性

概念

父组件传给子组件的属性,但该属性没有在子组件 props 属性里定义。

属性继承

非 Prop 的属性默认情况下会被子组件的根节点继承,非 prop 的属性会保存在子组件 $attrs 属性里。

举例

子组件 date-picker 如下

	<!-- 我是子组件 date-picker --><template><view class="date-picker"><input type="datetime-local" /></view></template>

父组件定义非 prop 属性 data-status,如下 

<date-picker data-status="activated"></date-picker>

子组件实际渲染如下

	<!-- 渲染 date-picker 组件 --><div class="date-picker" data-status="activated"><input type="datetime-local" /></div>

data-status 被应用在根节点(根节点:单文件组件中,template 标签的直接子元素就是根节点)上

非 prop 的属性会保存在子组件 $attrs 属性里。

事件继承

Vue 2 需要在被继承的节点上使用 v-on="$listeners" 才能继承父组件传过来的事件。

Vue 3 非 Prop 的事件默认会被子组件的根节点继承。

Vue2 非 prop 的事件会保存在子组件的 $listeners 属性里。

Vue3 非 prop 的事件会保存在子组件 $attrs 属性里,名称上,@ 会变成 on ,比如 @click 会变成 onClick 。

温馨提示

非 prop 的事件的 this 依旧是指向父组件。

子组件指定节点继承

子组件设置 inheritAttrs: false,在需要继承属性的子组件节点上使用 v-bind="$attrs"。

温馨提示

vue2 的 $attrs 属性不包含父组件传过来的 class 和 style 属性,vue3 的 $attrs 包含父组件传过来的 class 和 style 属性。

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

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

相关文章

数据结构刷题训练——二叉树篇(一)

&#x1f4d9;作者简介&#xff1a; 清水加冰&#xff0c;目前大二在读&#xff0c;正在学习C/C、Python、操作系统、数据库等。 &#x1f4d8;相关专栏&#xff1a;C语言初阶、C语言进阶、C语言刷题训练营、数据结构刷题训练营、有感兴趣的可以看一看。 欢迎点赞 &#x1f44d…

贪心找性质+dp表示+矩阵表示+线段树维护:CF573D

比较套路的题目 首先肯定贪心一波&#xff0c;两个都排序后尽量相连。我一开始猜最多跨1&#xff0c;但其实最多跨2&#xff0c;考虑3个人的情况&#xff1a; 我们发现第3个人没了&#xff0c;所以可以出现跨2的情况 然后直接上dp&#xff0c;由 i − 1 , i − 2 , i − 3 i…

D (1092) : DS循环链表—约瑟夫环(Ver. I - A)

Description N个人坐成一个圆环&#xff08;编号为1 - N&#xff09;&#xff0c;从第S个人开始报数&#xff0c;数到K的人出列&#xff0c;后面的人重新从1开始报数。依次输出出列人的编号。 例如&#xff1a;N 3&#xff0c;K 2&#xff0c;S 1。 2号先出列&#xff0c;然…

谷歌浏览器驱动下载

谷歌浏览器驱动下载 在使用selenium进行网页操作的时候通常会用到驱动器。以下是谷歌浏览器驱动下载方式。 谷歌浏览器驱动下载链接&#xff1a;https://chromedriver.chromium.org/downloads 打开连接后按照下图步骤进行操作&#xff1a; 查找出自己谷歌浏览器版本后根据以…

gitlab突然提示我要输入密码了。

用了很长时间的一个gitlab库&#xff0c;今天提交代码的时候突然提示我输入密码了&#xff0c;并且用户还是gitxx.xx.xx.xx的&#xff0c;瞬间懵逼。 想想原因&#xff0c;可能是因为我不久前设置了本地对另外一个git库的远程访问&#xff0c;用的是ssh&#xff0c;操作过程中可…

【单元测试】如何使用 JUnit5 框架?

JUnit5 单元测试框架使用教程 一、Junit5 是什么&#xff1f; Junit5是一个用于在Java平台上进行单元测试的框架。JUnit 5 框架主要由三部分组成&#xff1a;JUnit Platform、JUnit Jupiter 和 JUnit Vintage。 JUnit Platform&#xff1a;定义了测试引擎的 API&#xff0c;是…

[yolo系列:yolov7添加可变形卷积Deformable Conv V2]

yolo系列文章目录 文章目录 yolo系列文章目录一、可变形卷积是什么&#xff1f;二、使用步骤1.在models/common.py文件添加2.然后再yolo.py里面添加DCNv23.修改yolov7的yaml 总结参考文章 一、可变形卷积是什么&#xff1f; 可变形卷积即DCN&#xff08;缩写取自Deformable Con…

天启科技联创郭志强:趟遍教育行业信数化沟坎,创业智能赛道重塑行业生态

郭志强 天启科技联合创始人 近20年互联网、企业信息化、数字化实施、管理及培训经验。对于集团型企业及初创企业、传统企业及互联网企业的信息化、数字化转型有自己独到的见解和实操经验。具备跨区域、集团化信息规划、解决方案、系统架构及企业流程搭建、优化和技术团队管理能…

leetCode 674. 最长连续递增序列 动态规划 / 贪心策略

674. 最长连续递增序列 - 力扣&#xff08;LeetCode&#xff09; 给定一个未经排序的整数数组&#xff0c;找到最长且 连续递增的子序列&#xff0c;并返回该序列的长度。 连续递增的子序列 可以由两个下标 l 和 r&#xff08;l < r&#xff09;确定&#xff0c;如果对于每…

Qt之实现圆形进度条

在Qt自带的控件中&#xff0c;只有垂直进度条、水平进度条两种。 在平时做页面开发时&#xff0c;有些时候会用到圆形进度条&#xff0c;比如说&#xff1a;下载某个文件的下载进度。 展示效果&#xff0c;如下图所示&#xff1a; 实现这个功能主要由以下几个重点&#xff1a…

rk平台android12系统设置里面互联网选项中的以太网选项点击不了问题

rk平台android12系统中,系统设置中的互联网选项,当连接以太网以后,会显示以太网的选项,但是点击没作用,现在需要点击能够进入到以太网的设置界面,需要添加相关的点击事件。 首先,在packages/apps/Settings/AndroidManifest.xml中的以太网设置配置添加一个action,用于打…

php 安装mongodb扩展模块,rdkafka模块

mongodb mongodb扩展下载 选择php版本&#xff0c;根据报错提示&#xff0c;选择扩展对应的版本选择非安全进程将php_mongodb.dll放到php/ext目录下修改php.ini配置&#xff0c;添加extensionphp_mongodb.dll开启php_mongodb扩展&#xff0c;重启服务php -m 查看是否开启成功…

整理mongodb文档:副本集二

个人博客 整理mongodb文档:副本集二 个人博客&#xff0c;求推荐&#xff0c;本片内容较为乱 文章概叙 本文章主要讲在MongoDB的副本集中的一些注意点&#xff0c;主要是如何对seconadry进行数据操作&#xff0c;以及对更新数据的一些介绍 查看当前节点 上一集讲了关于搭…

leetcode 96 不同的二叉搜索树

给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种&#xff1f;返回满足题意的二叉搜索树的种数。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;5 示例 2&#xff1a; 输入&#xff1a;n 1 输出&#xff1a;1…

Git指导:提交干净的commit信息

为什么我们应该关心编写干净的提交消息&#xff1f; 提交是程序员技术的有形构建块。它们充当代码的锦上添花&#xff0c;如果编写正确&#xff0c;它们会带来巨大的价值。编写良好的提交消息变得不可或缺&#xff0c;因为它们提供了上下文——否则一开始就不需要提交消息。 良…

STM32 CubeMX ADC采集(HAL库)

STM32 CubeMX ADC采集&#xff08;HAL库&#xff09; STM32 CubeMX STM32 CubeMX ADC采集&#xff08;HAL库&#xff09;ADC介绍ADC主要特征最小识别电压值&#xff1a;2.4/4096≈0.6mv&#xff08;不考虑误差&#xff09;一、STM32 CubeMX设置二、代码部分三&#xff0c;单通道…

【学习笔记】莫比乌斯反演

退役OIer回来受虐啦 一些定义 μ ( x ) { 1 x > 1 ( − 1 ) n x ∏ i 1 n P i 0 o t h e r w i s e \mu(x) \begin{cases} 1 & x > 1 \\ (-1)^n & x \prod _ {i1} ^ {n} P_{i}\\ 0 & otherwise \end{cases} μ(x)⎩ ⎨ ⎧​1(−1)n0​x>1x∏i1n​Pi…

python读取CSV格式文件,遇到的问题20231007

python读取的CSV文件必须是具备相同列数的吗&#xff1f; 在Python中&#xff0c;读取CSV文件时不一定要求每一行都具有相同的列数。CSV文件可以包含不同数量的列&#xff0c;但你需要小心处理不同列数的情况&#xff0c;以确保代码能够正常处理。 通常情况下&#xff0c;CSV文…

黑马JVM总结(二十八)

&#xff08;1&#xff09;语法糖-foreach &#xff08;2&#xff09;语法糖-switch-string &#xff08;3&#xff09;语法糖-switch-enum &#xff08;4&#xff09;语法糖-枚举类 枚举类 &#xff08;5&#xff09;语法糖-twr1

Linux登录自动执行脚本

一、所有用户每次登录时自动执行。 1、在/etc/profile文件末尾添加。 将启动命令添加到/etc/profile文件末尾。 2、在/etc/profile.d/目录下添加sh脚本。 在/etc/profile.d/目录下新建sh脚本&#xff0c;设置每次登录自动执行脚本。有用户登录时&#xff0c;/etc/profile会遍…