- 1Ubuntu 20.04安装禅道开源版_linux ubutu 安装禅道
- 2使用OpenGL实现视频录制_createinputsurface
- 3phpmysqli防注入攻略_phpmysqli防sql注入
- 4PuLID: 图像背景、光线、风格等均保持高度一致图像生成工具，附本地一键包
- 5org.springframework.boot.SpringApplication.reportFailure(SpringApplication.java:858) - Application r
- 6【】jQuery 等技术 目录_web app rails 10日谈
- 7在英特尔至强 CPU 上使用 Optimum Intel 实现超快 SetFit 推理
- 8【批处理DOS-CMD命令-汇总和小结】-上网和网络通信相关命令-用户账户管理-文件（夹）共享（net）_udk用户服务
- 9【机器学习】L1正则化和L2正则化_l1l2正则化
- 10给大家推荐几款好用的网络监控工具_网络链路监控ruanj
vue中怎么向html传值,Vue中的$attrs 爷孙传值
赞
踩
所谓的$arrts其实就是多级组件中的props，它就像一个中间件，用来传递爷组件给孙组件的数据，使用的时候只需给父组件中的孙组件配置v-bind="$attrs",然后再爷组件中传入孙组件所需要的数据，孙组件正常接收即可。
参考于
什么情况下使用
在实际开发过程中，会经常出现组件多级嵌套的情况，那么这个时候如上图所示，需要组件A传递数据给组件C，通常可以使用props依次传递 和 Vuex(状态管理)来实现，但是这两种方式要么代码臃肿不堪，要么大材小用，而这个时候$attrs就可以很好的解决这个问题。
$attrs是Vue实例的属性。
具体见下文demo
componentA
我是组件A
import componentB from '@/componentB'
export default {
components: {
componentB
}
}
.dv{
width: 600px;
height: 600px;
background-color: yellow;
}
componentB
我是B
传递给我的是{{text}}
import componentC from '@/componentC'
export default {
components: {
componentC
},
props: {
text: {
type: String,
default: ''
}
}
}
.dv{
width: 400px;
height: 400px;
background-color: pink;
}
componentC
我是c
我要爷爷的{{msg}}
export default {
props: {
msg: {
type: String,
default: ''
}
}
}
.dv{
width: 200px;
height: 200px;
background-color: red;
}
效果
关于找一找教程网
本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。
[Vue中的$attrs 爷孙传值]http://www.zyiz.net/tech/detail-97911.html
