$attrs的使用


作用:$attrs可父子孙一脉相传(父系)的组件间的通信

可以用于高级多层组件间的封装

  • 父子通信:
    如果是父子组件之间的通信,在父组件传给子组件的数据,可用props来进行接收。如果不用props接收,父组件传过来的数据会在$attrs里面

  • 父子孙通信
    父组件的传给子组件的数据,子组件可以用props来接收,props没有接收完的的数据会在$attrs中,孙组件要想接收这个数据可以在子组件中加入v-bind='$attrs'来传给孙子组件。这样孙子组件就可以接收它爷爷过来的数据了。

$attrs中包含的数据=(父组件总的传过来的数据-子组件props接收的数据)

$attrs的方便之处在于数据一层一层的传下去,不用每一层都用props接收之后再传给后面的组件。可以直接加一个v-bind='$attrs'就可以传下去了

image

上图中父组件传了很多数据给子组件有 tableItems,menu,menuTochild等等

image
image

子组件中用porps接收了很多父组件传过来的数据,但是没有用props接收menu的数据,父组件也传了pageContent给孙组件,孙组件也没有用porps来接收pageContent

image

所以孙组件中的$attrs中包含了父组件的menu,和子组件的pageContent,其它的数据都被props接收走,没有到$attrs中


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM