非 Prop 属性

1
2
3
<div id="app">
<my-component data-3d-date-picker="true" class="external" style="display: block;" :msg="msg"></my-component>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Vue.component('my-component', {
template: `
<div data-3d-date-picker="false" class="internal" style="border:1px solid #f06292">
<span>{{ msg.message }}</span><br>
</div>
`,
props: {
msg: {},
}
})
const app = new Vue({
el: '#app',
data: {
msg: {
message: 'hello, world.'
},
},
})

其中 msg 是 prop 属性,data-3d-date-picker, class, style 是非 prop 属性。
在 Chrome 中审查元素,可以发现:

  • style 覆盖,font-size:20px 被 font-size:30px 覆盖
  • style 合并,font-size:30px 和 border:1px solid #f06292 合并
  • class 合并,external 和 internal 合并
  • data-3d-date-picker 覆盖,data-3d-date-picker=”false” 被 data-3d-date-picker=”true” 覆盖

最后补充英文译文:
对于大多数属性,传给组件的值将会替换掉组件自身设置的值。因此,例如,向组件传入 type="large",将会替换掉组件自身设置的 type="date",这就很可能破坏组件的一些预设功能!幸运的是,classstyle 属性会略微智能,这两个值会被合并,而非替换,而最终的值是:form-control date-picker-theme-dark