概念
父组件传给子组件的属性,但该属性没有在子组件 props 属性里定义。
属性继承
非 Prop 的属性默认情况下会被子组件的根节点继承,非 prop 的属性会保存在子组件 $attrs 属性里。
举例
子组件 date-picker 如下
<!-- 我是子组件 date-picker --><template><view class="date-picker"><input type="datetime-local" /></view></template>
父组件定义非 prop 属性 data-status,如下
<date-picker data-status="activated"></date-picker>
子组件实际渲染如下
<!-- 渲染 date-picker 组件 --><div class="date-picker" data-status="activated"><input type="datetime-local" /></div>
data-status 被应用在根节点(根节点:单文件组件中,template 标签的直接子元素就是根节点)上
非 prop 的属性会保存在子组件 $attrs 属性里。
事件继承
Vue 2 需要在被继承的节点上使用 v-on="$listeners" 才能继承父组件传过来的事件。
Vue 3 非 Prop 的事件默认会被子组件的根节点继承。
Vue2 非 prop 的事件会保存在子组件的 $listeners 属性里。
Vue3 非 prop 的事件会保存在子组件 $attrs 属性里,名称上,@ 会变成 on ,比如 @click 会变成 onClick 。
温馨提示
非 prop 的事件的 this 依旧是指向父组件。
子组件指定节点继承
子组件设置 inheritAttrs: false,在需要继承属性的子组件节点上使用 v-bind="$attrs"。
温馨提示
vue2 的 $attrs 属性不包含父组件传过来的 class 和 style 属性,vue3 的 $attrs 包含父组件传过来的 class 和 style 属性。