2019-12-26 seo達人
禁用繼承屬性inheritAttrs和$attrs的使用
Index.html:
<div id="app">
<test-input
v-bind:class="class1"
v-bind:style="{fontSize:17+'px'}"
v-bind:test1='test1'
test2="test2"
placeholder="placeholder test3"
></test-input>
</div>
Index.js:
Vue.component('test-input', {
inheritAttrs: false,
template: <label ><br /> <p v-bind="$attrs">測試</p><br /> <input v-bind="$attrs"><br /> </label>
})
new Vue({
el:'#app',
data:{
class1:'class1note',
test1:'test1note',
test2:'test2note',
},
})
頁面結果：
當將屬性修改為：inheritAttrs: true,的時候
頁面的結果：
包含了所有的屬性：
最后總結：
當inheritAttrs的屬性值為true（不寫該行屬性的結果同true，也就是inheritAttrs默認為true），組件的根元素會自動繼承所有的屬性！當為false的時候，根元素只會繼承注冊的屬性，自建的屬性不會繼承！！
attrs:它包含了父組件所有的自建屬性！可以通過v?kind=“ attrs:它包含了父組件所有的自建屬性！可以通過v-kind=“attrs:它包含了父組件所有的自建屬性！可以通過v?kind=“attrs”將所有自建屬性賦給想要的元素上！！