h5网站开发火爆产品的推广文案

概念

父组件传给子组件的属性，但该属性没有在子组件 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 属性里。

事件继承

非 Prop 的方法会被子组件的根节点继承。

非 prop 的方法会保存在子组件 $attrs 属性里，名称上，@ 会变成 on ，比如 @click 会变成 onClick （vue3）。

温馨提示

1、非 prop 的方法的 this 依旧是指向父组件。

2、Vue 2 需要在被继承的节点上使用 v-on="$listeners" 才能继承父组件传过来的方法。

子组件指定节点继承

子组件设置 inheritAttrs: false，在需要继承属性（方法）的子组件节点上使用 v-bind="$attrs"。

温馨提示

vue2 的 $attrs 属性不包含父组件传过来的 class 和 style 属性，vue3 的 $attrs 包含父组件传过来的 class 和 style 属性。