组件之间传递数据的方式有很多种,之所以有这么多种方式,是为了满足在不同场景不同条件下的使用。
一般有三种方式:
props
vuex
Vue Event Bus
本文介绍的是使用$attrs的方式。
这是$attrs的官网api https://cn.vuejs.org/v2/api/#vm-attrs
这个api是在2.4版本中添加的,那么为什么要添加这个特性呢?
看看官网是怎么解释的
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 ( class 和 style 除外),
并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
第一次看的话真是不容易看懂,这里是既包含用法又隐晦的说明了为什么使用,还是我来解释一下吧。
意思就是: $attrs 可以收集父组件中的所有传过来的属性除了那些在组件中没有通过 props 定义的。
引申说明一下,如果组件的嵌套层级有点深但又不那么深,比如三层。
我们如果使用props的话,最里面的组件想要获取最外层组件的数据,就要通过中间的组件的props来传递,
但是这个props对于中间的这个组件没啥用处,它就是做了一个桥梁而已。我们平时写代码时候其实经常碰到
这种场景,写起来有时候觉得挺烦的。所以就有了这个$attrs来帮助我们,不必在中间组件中写props就可以让
最里面的组件拿到最外面组件传进来的数据。
那么,具体怎么使用呢?
看看下面的代码吧,很简单就懂了
准备三个组件
里面的代码如下
//grandfather <template> <div style="background: blue"> father in grandfather <father :father-age="50" :child-time="`${time}`"></father> </div> </template> <script> import father from './father' export default { components: { father }, data () { return { time: new Date().getTime() } } } </script> //father <template> <div style="background: red"> child in father <div> <span>father age:</span>{{fatherAge}} </div> <child v-bind="$attrs"></child> </div> </template> <script> import child from './child' export default { components: { child }, props: { fatherAge: { type: Number, default: 0 } } } </script> //child<template> <div style="background: green"> <div>child</div> <div>time: {{childTime}}</div> </div> </template> <script> export default { props: { childTime: { type: String, default: '' } } } </script>
需要从爷爷组件直接传给子组件的数据,不要在父组件中的props中声明。
在子组件上通过v-bind
的方式就可以把父组件中未声明而子组件需要从爷爷组件中获取的数据传给子组件。
当然,子组件props肯定是要声明的,还是props的用法啦。
总结
以上所述是小编给大家介绍的vue中通过使用$attrs实现组件之间的数据传递功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。