Vue中非Prop的Attribute与禁用Attribute继承

一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute

 

1、attribute和property

首先要区分JS中的attribute和property：https://www.cnblogs.com/lmjZone/p/8760232.html

attribute：属性; 特征; 性质

property：性质；特性

翻译类似，但是在JS中：

• property是DOM中的属性，是JavaScript里的对象。property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。
• attribute是HTML标签上的特性，它的值只能够是字符串。attribute就是DOM节点自带的属性，例如html中常用的id、class、title、align等，与他们并列。其内部包含自定义属

attribute是property的子集。property内包含了DOM节点自带的属性；attribute是一个Attr类型的对象，拥有NodeType、NodeName等属性这个对象按顺序记录了我们在TAG中定义的属性和属性的数量。

可以这样理解，只要是DOM出现的属性，不管是否自定义，都属于attribute；常用的基本属性才属于property。

取值：

• getAttribute()可以取得任何特性，不管是标准的还是自定义的。
• porperty取值就是常用的  ‘.’  div.id、person.name

赋值：

　　对属性Property可以赋任何类型的值，而对特性Attribute只能赋值字符串！

 

property和attribute赋值关系：

• property能够从attribute中得到同步；
• attribute不会同步property上的值；
• attribute和property之间的数据绑定是单向的，attribute->property；
• 更改property和attribute上的任意值，都会将更新反映到HTML页面中；

 

2、Vue中非Prop的Attribute

　　其实就是用props父传子时，子组件未定义合适的props，从而attribute添加到这个子组件的根元素上

子组件未定义props：

　　

 

 attribute添加到根元素上

　　

 

 

3、禁用attribute继承

如果不想让非prop添加到根元素上，

　　3.1、可以使用  inheritAttrs: false 禁止继承，不绑定于根

 

　　3.2、使用v-bind="$attrs"绑定在别的元素上（如果不添加inheritAttrs: false这样还是会绑定在根上）