最近在封装组件,意外发现了inheritAttrs,$attrs与$listners这三个的使用,下面简单介绍一下。
inheritAttrs,$attrs与$listners的使用场景:组件传值 尤其是祖孙组件组件之间的传值。
A组件与C组件的通信有几种方式实现呢?
1.可以使用vuex 但是vuex主要用来管理全局状态数据 比较适用于一些大型的项目中
2.使用B组件作为中转站 A组件传递数据给B组件 B组件再传递数据给C组件 这样也能实现 只是如果嵌套的组件过多 会造成代码繁琐冗余的情况
3.自定义一个Vue事件总线 也可以但是缺点是不适合多人合作项目
所以 我们采用$attrs与$listens来解决以上的这种情况。
1.inheritAttrs
属性说明:https://cn.vuejs.org/v2/api/#inheritAttrs
组件传值一般是通过props传值的。inheritAttrs的默认值一般是true,true的意思是将父组件中除了props外的属性添加到子组件的根节点上。如示例:
grandPa.vue
father.vue
渲染结果如下:
将inheritAttrs的值改为false之后 渲染结果如下:
那么将inheritAttrs设置为false后 如何获取属性呢? 这时就通过$attrs来获取。
son.vue
这样son.vue就可以通过props来获取到祖父组件中的数据了,在父组件中使用v-bing="$attrs" 将父组件中属性值传递给 子组件。
以上就是祖父组件----->父组件----->子组件
那么如何子组件------>父组件------->祖父组件呢??
父组件使用$listners传递即可。
father.vue
son.vue
grandPa.vue
结果如下:
祖父组件获取到了子组件的数据。
现在,我们应该清楚inheritAttrs,$attrs与$listners的用法了吧~~