vue3 基础-non-props 特性
本篇探讨当父组件通过属性给子组件传数据时, 子组件如果不通过 props 属性进行接收, 那数据会挂载到哪里, 以及子组件如何能使用这些数据.
正常的父子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<title>正常-父子组件传值</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
// 1. 父组件通过 msg 属性给子组件传递一个 "hello, youge" 的数据
template: `
<div>
<Son msg="hello, youge" />
</div>
`
})
app.component('Son', {
// 2. 正常逻辑就是子组件通过 props 进行接收
props: ['msg'],
template: `<div>son</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
现在, 如果子组件 Son 不写 props 属性的话, 则这个数据会自动挂载的子组件 Son 的最外层 dom 上如下:
<div msg="hello, youge">son</div>
当然, 子组件也可选择就不接收父组件数据, 则在子组件中设置 inheritAttrs: false 即可.
app.component('Son', {
inheritAttrs: false,
template: `<div>son</div>`
})
non-props 应用
当父组件要给子组件传递一个样式的时候, 就可直接自动应用到子组件最外层 dom 啦.
<!DOCTYPE html>
<html lang="en">
<head>
<title>nop-props 传样式过去</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
template: `
<div>
<Son style="color: orange;" />
</div>
`
})
app.component('Son', {
template: `<div>son</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
则可看到父组件传递的样式在子组件上就直接生效了, 这还是有使用场景的. 但当我们的子组件最外层有多个 dom 节点时, 则可通过 v-bind="$attrs" 的来指定作用于谁.
app.component('Son', {
template: `
<div>son</div>
<div v-bind="$attrs">son</div>
<div>son</div>
`
})
这就表明样式的这个 nop-props 就作用于上图第二个节点了.
$attrs 就是用来存储父子局传过来的所有属性, 则就可以按需使用了.
<!DOCTYPE html>
<html lang="en">
<head>
<title>传多值 $attrs</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
template: `
<div>
<Son style="color: orange;" />
</div>
`
})
app.component('Son', {
template: `
<div>son</div>
<div v-bind="$attrs">son</div>
<div>son</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
当然更多的应用配置是, 我能自己去通过 $attrs 对父组件传过来的多数据进行自己随意应用.
<!DOCTYPE html>
<html lang="en">
<head>
<title>传多值 $attrs</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
template: `
<div>
<Son msg="hello" msg1="youge" />
</div>
`
})
app.component('Son', {
template: `
<div :msg="$attrs.msg">{{$attrs.msg}}</div>
<div>啥都不接收</div>
<div :cj="$attrs.msg1">{{$attrs.msg1}}</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
对于这些 nop-props 的属性数据, 则子组件可通过 v-bind="$ attrs.xxx" 进行应用即可. 同时它也是可以直接在其他地方用的, 比如生命周期函数:
<script>
const app = Vue.createApp({
template: `
<div>
<Son msg="hello" msg1="youge" />
</div>
`
})
app.component('Son', {
mounted () {
console.log(this.$attrs.msg)
},
template: '<div>son</div>'
})
</script>
小结
- 父子组件传值常规操作是父组件通过属性传数据给子组件, 子组件通过 props 进行接收
- non-props 即当子组件不通过 props 接收父组件传的数据时, 其都会存在 $attrs 这个属性中
- 子组件可通过 v-bind=$attrs.xxx 的方式对 non-props 的数据进行应用
- 在很多地方如生命周期函数都是可以直接访问 $attrs 的数据, 即 this.s.attrs.xxx
vue3 基础-non-props 特性的更多相关文章
- 4-3 组件参数校验与非props特性
本文参考脚本之家,https://www.jb51.net/article/143466.htm 通过属性的形式,父组件对子组件进行参数的传递 //如下图: //父组件设置content属性,向属性中 ...
- linux基础之bash特性
linux基础之bash特性 1.命令历史 命令历史包含的环境变量 $HISTSIZE:命令历史记录的条数 $HISTFILE:命令历史文件~/.bash_history $HISTFILESIZE: ...
- Java基础-面向对象第一特性之封装(Encapsulation)
Java基础-面向对象第一特性之封装(Encapsulation) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.理解什么是面向过程和面向对象 面向过程与面向对象都是我们编程中 ...
- Redis 宝典 | 基础、高级特性与性能调优
转载:Redis 宝典 | 基础.高级特性与性能调优 本文由 DevOpsDays 本文由简书作者kelgon供稿,高效运维社区致力于陪伴您的职业生涯,与您一起愉快的成长. 作者:kelgon ...
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- vue组件参数校验与非props特性
组件参数校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...
- C#基础系列——Attribute特性使用
前言:上篇 C#基础系列——反射笔记 总结了下反射得基础用法,这章我们来看看C#的另一个基础技术——特性. 1.什么是特性:就博主的理解,特性就是在类的类名称.属性.方法等上面加一个标记,使这些类.属 ...
- JAVA基础——面向对象三大特性：封装、继承、多态
JAVA面向对象三大特性详解 一.封装 1.概念: 将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问. 2.好处: 只能通过规定的方法访问数据. ...
- Redis基础、高级特性与性能调优
本文将从Redis的基本特性入手,通过讲述Redis的数据结构和主要命令对Redis的基本能力进行直观介绍.之后概览Redis提供的高级能力,并在部署.维护.性能调优等多个方面进行更深入的介绍和指导. ...
- Redis 基础、高级特性与性能调优
本文将从Redis的基本特性入手,通过讲述Redis的数据结构和主要命令对Redis的基本能力进行直观介绍.之后概览Redis提供的高级能力,并在部署.维护.性能调优等多个方面进行更深入的介绍和指导. ...
随机推荐
- [计算机/硬件/GPU] 显卡
序 截至2025年,全球主流的AI大模型满血版的参数量均已突破百亿级,算力需求正以指数级飙升.特别是 DeepSeek 公司旗下的 R1 系列模型的问世,推动了很多中小企业部署私有化模型的需求. 然而 ...
- PKUWC2025 游记
哈哈哈哈哈,我糖完了,哈哈哈哈哈. Day \(-998244353\) 被波波抓到机房充军集训去了,听到了很多新奇的算法,然后拼尽全力仍难以 \(AC\)--然后被各种巨佬疯狂单调队列. Day \ ...
- ABB工业机器人控制柜IRC5维修具体细节
对于ABB机器人维修工作,需要具备专业的知识和技能,同时遵循维修步骤和注意事项.通过加强预防措施和建议的实施,可以有效降低ABB工业机器人控制柜IRC5的故障率,提高ABB工业机器人的整体运行效率. ...
- nginx 强制https
nginx 强制https 通常有如下两种方法强制https推荐第二种,第二种更高效1.使用nginx的rewrite方法 server { listen 80; server_name xxx. ...
- 【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit（5）
1.问题描述: 提供两套标准方案,可根据体验需求选择: 1.地图Picker(地点详情) 用户体验:①展示地图 ②标记地点 ③用户选择已安装地图应用 接入文档:https://developer.hu ...
- 使用QT开发远程linux服务器过程
1.添加设备为通用linux 2.设置ip用户名 3.创建私钥文件,原来有的qtc那俩个文件删掉. 4.部署公钥,前提是测试链接要出现成功 5.在kits里添加编译环境设置编译器为32位或者64 6. ...
- 不止排名，Google SEO 10 大核心心得分享
原博客:https://bysocket.com/seo-tips-2025/ 在过去的一年中,我深入实践了 Google SEO,积累了自己一些经验和看法.以下是我的实操心得,希望对大家有所帮助. ...
- css 保留后端 textarea 中的换行与空格字符
原文链接:https://blog.jijian.link/2020-10-22/css-pre/ 如果后台使用 textarea 输入内容,在前段显示需要保留换行符与空白字符,该如何做? 常规方法 ...
- 修改docker的默认存储位置及镜像存储位置
前言 Docker 默认安装的情况下,会使用 /var/lib/docker/ 目录作为存储目录,用以存放拉取的镜像和创建的容器等. 不过由于此目录一般都位于系统盘,遇到系统盘比较小,而镜像和容器多了 ...
- mac 如何开启指定端口供外部访问？
前言 需要 mac 上开放指定端口,指定 ip 访问 解决 在 macOS 上开放一个端口,并指定只能特定的 IP 访问,可以使用 macOS 内置的 pfctl(Packet Filter)工具来实 ...