vue传值与$attrs

el/2024/7/17 22:16:55

传值看这个https://www.cnblogs.com/barryzhang/p/10566515.html 但是他$attrs的部分不是太好

这个https://www.jianshu.com/p/f7fa47499b39 $attrs的部分写的还可以,

其实很多时候,你在vue或者react组件里面打印一下this就能发现很多属性,值得研究,

就好像window身上那么多属性,其实很值得研究,有很多很厉害的东西都源自这里

A B C三个组件

父子 子父传值 假如A传值给B,B传值给C,虽然是同一个值,但是这样冒号传,props接的很麻烦,可以看这篇文章,https://www.cnblogs.com/wuxianqiang/p/10452662.html 大意就是

比如A要传1个属性给B用,传10个给C用,但是父子传,就会B接收A的11个属性,然后传个C,C又props接收B的10个属性......很麻烦,但是用$attrs,在B身上v-bind="$attrs"(不能简写成:"$attrs或者:="$attrs") C就可以通过$attrs使用那10个没被Bprops接收的属性了,相当于少写了20个props接收语句

爷孙 孙爷传值 ($listenter感觉像是子爷传值)  所以用$attrs,他的作用是,比如A传了name,sex给B

那么B用props接收,接了多少,剩余的属性就会到$attrs身上,如果接完了,$attrs身上就没东西

然后C组件也可以通过$attrs拿到这些属性,当然再来一个D组价就拿不到了,只能三代(虽然没试过)

我感觉$attrs主要的作用就是两种情况 A有一大堆属性要往下传   ,1.A只想给B传一两个属性,但是想给C传很多属性  2.A想给B传很多属性,但是只想给C传一两个属性

这时候,如果用props接收,C也用props接收,就会非常多和冗余,比如有几十个属性,那就.......

这个时候$attrs的作用就来了,特别是针对情况1,B用props接收需要的那一两个属性,$attrs身上就有A传过来的剩余其他属性,B组件里可以$attrs点出来,C组件v-bind="$attrs"之后也可以在C组件中$attrs点出来

不需要props接收一堆...感觉主要是这个作用把


http://www.ngui.cc/el/3419272.html

相关文章

rgba与opacity的区别

rgba是一种颜色,opacity则影响的是元素的透明度,虽然rgba的那个a也是透明度,但那是改变颜色透明度,也就是rgba整个就是一个颜色 而div的bakcgrond默认是rgba的a是0的,也就是默认透明色,当你随便给一个颜色的时候就会覆盖掉它

websocket知识学习---持续更新

1.new websocket(url) 这个url只会有两种格式 ws://域名或服务器地址 wss://域名或服务器地址 ws对应的是http wss对应的是https 写在里面的域名就不要再加这些http或者https这些玩意了 不过sockjs-client建立的时候传的是完整的域名,包括http或者https,估计是内部做…

vuex命名空间模块化

目录结构 modules/app.js export default {namespaced: true,state: {token: notoken},getters: {},mutations: {changeToken(state, res) {state.token res}},actions: {} }modules/shop.js export default {namespaced: true,state: {count: 80},getters: {},mutations: {…

npm init export等等

首先如果想用export模块化,需要npm init 执行之后,会多出来一个pakcage.json文件,这时候如果你还无法模块化,那就看看这个文件里有没有type:module,没有就加上 关于npm init的其他作用可以看这篇 https://www.cnblogs.com/wangxirui/p/13399315.html 然后普通的export 导出…

三次握手四次挥手自记录

三次握手,是客户端发SYN发起建立连接请求到服务端,服务端接收后发SYN和ACK到客户端确认收到连接请求,客户端再发ACK服务端接收到了它确认收到连接请求的消息,这样就握手了 四次挥手,和三次握手一样,但为什么有四次,因为考虑到服务端数据可能没有传输完,所以有一次等待它数据传…

sessionstorage cookie localstorage的区别

区别见文章https://www.cnblogs.com/jing-tian/p/10991431.html 其中有个最主要的地方是这个 sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localstorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的 …

provide与inject传值,provide传递的值,如果不是引用类型,就不会响应变化

这里提一嘴,比如你渲染一个对象,然后点击一下,给这个对象动态添加属性,那么这个对象数据确实变化了,但是视图不会更新,不过数组不会有这个问题,对象就会有这个问题 原因和解决方法见这篇文章 https://segmentfault.com/a/1190000014826146 而provide与inject传值比较离谱,刚好…

节流函数与实现双击

首先节流和防抖的概念 节流一般用在下拉事件,比如下拉的时候打印aaa,比如设置1000毫秒间隔,那么就会从第一次开始之后,如果你持续下拉,它也只会1000毫秒执行一次 防抖一般用在输入框搜索事件,比如搜索第一下,出现搜索结果,然后就会从第一次开始之后,如果你持续输入,它不会再出…

promise.all啥意思

比如你发个请求,下面这种就是典型的回调地狱,这种发请求的方式,都是只能上一个请求发完,才会进去发下一个 this.api.getdata().then(() > {this.api.getdata1().then(() > {}) }) 但是你也可以这样写,这样请求就都是并发发送的了 this.api.getdata().then(() > {})…

js执行栈啥意思

名字叫栈的都是 "先进后出,后进先出" 那么这个 "先进后出,后进先出"到底指的是什么呢 是这个 可以看到代码确实是自上而下执行的,先打印的bar1,再打印的foo,那这不就是先调用的先执行吗, "先进后出,后进先出"到底指的是什么呢 它指的是执行…