Vue里$attrs的使用

如果你的项目很复杂,一个组件嵌套了子组件,子组件又嵌套了子组件,而且在父组件里(这里说的父组件是我文章里第一次提到的组件)需要自定义的属性很多,传递给子组件的数据很多,但是并不是每一个组件都会用到所以新增一个$attrs这个属性,说了这么多,听着好乱,但是其实是个很简单的小功能,是对一个问题考虑到极端的情况下而增加的,来看代码:
根组件:

//根组件里的引用的子组件,需要将message title age name 等数据传递到son组件里
 <son :message = "message" :title = "title" :age="age" :name = "name"></son>

子组件:

//子组件里引用孙组件(哈哈哈),子组件声明了title属性,剩下的message age name 还要继续往下传递,所以还要加上
   <grandson :message = "message"  :age="age" :name = "name"></grandson>

如此往下,如果根组件有很多自定义属性要绑定,写起来确实很麻烦,这就是我前面说的极端情况,所以$attrs就排上用场了,子组件可以这样写:

 <grandson v-bind = "this.$attrs"></grandson>

第二个代码块喝第三个代码块的作用是一样的,只是写法上变的简单了,这就是区别,其实一般的简单的项目根本用不到。

this.$attrs:父组件传递下来的但是在你调用的那组件(this)里没注册使用的,需要继续传递下去的所有

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容