Vue3.0中的$attrs 爷孙传值(跨级传值)笔记

649 阅读1分钟
Vue3.0中的$attrs 爷孙传值(跨级传值)

Vue2中除了$attrs外,还有$listeners;Vue3$listeners合并到$attrs里了。
通俗来说,$attrs主要接收没在props里定义,但父组件又传过来的参数。

效果图如下

1666147366173.jpg

爷爷的代码:

image.png
childrenData是自己给父级的展示参数;one_objone_name是自己给孙级的展示参数根据自己的需求传值就可以

父亲的代码:

image.png
常规操作,通过props接收所需要的值,展示即可

最后是小孙孙的代码:

image.png $attrs接收到一个对象参数,根据$attrs接收到的参数赋值就可以了