非 Prop 的属性

概念

父组件传给子组件的属性，但该属性没有在子组件 props 属性里定义。

属性继承

非 Prop 的属性默认情况下会被子组件的根节点继承，非 prop 的属性会保存在子组件 $attrs 属性里。

举例

子组件 date-picker 如下

父组件定义非 prop 属性 data-status，如下 

子组件实际渲染如下

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 属性。