当前位置: 首页 > Web前端 > vue.js

当vue中嵌套$attrs和$listeners

时间:2023-04-01 01:10:16 vue.js

多级组件需要传递数据时,通常采用的方式是通过vuex。如果只是传递数据,不做中间处理,用vuex来处理,就有点大材小用了。于是就有了$attrs/$listeners,它们通常是和inheritAttrs一起使用的。inheritAttrs:默认值为true。默认情况下,不被视为props的父范围属性绑定将“回退”并作为普通HTML属性应用于子组件的根元素。当组成一个包装一个或另一个目标元素的组件时,这可能并不总是像预期的那样表现。通过将inheritAttrs设置为false,这些默认行为将被删除。这些属性可以通过(也是2.4中新增的)实例属性$attrs生效,并且可以通过v-bind显式绑定到非根元素。看官网感觉挺晦涩的。简单来说,inheritAttrs:true继承除了props之外的所有属性;inheritAttrs:false只继承类属性$attrs:包含不被考虑(也不期望是)的props属性绑定的父作用域(class和style除外),可以通过v-bind="$attrs"传递给内部组件.当组件未声明任何props时,它包括所有父范围绑定(类和样式除外)。$listeners:包含父作用域中的v-on事件监听器(不带.native修饰符)。它可以通过v-on="$listeners"传递给内部组件。它是一个包含所有作用于该组件的事件监听器的对象,相当于子组件继承了父组件的事件。话不多说,先上栗子father.vue组件:="delInfo"/>child.vue组件:grandSon.vue组件: