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”将所有自建属性赋给想要的元素上！！