一.Vue特性自动继承
直接看一个例子：
<body>
<div id="app">
<custom-component customProp="propValue" newAddProp="propValue2"></custom-component>
</div>
<script type="text/javascript">
Vue.component('custom-component', {
props:['customProp'],
template:`<div id="1"><span id="2"><span id="3">vue.js</span></span></div>`,
});
var app1 = new Vue({
el:'#app'
});
</script>
</body>
在浏览器中打开，并打开开发者工具，观察HTML元素节点：
可以看到，我们组件的template根节点元素div(id=1) 会自动继承我们添加的属性，这就是Vue组件的特性自动继承。
二.inheritAttrs禁止特性自动继承
inheritAttrs的作用就是禁止特性继承,对上面的例子加已改造，在component中添加 inheritAttrs: false ：
Vue.component('custom-component', {
inheritAttrs: false, //此处设置禁用继承特性
props:['customProp'],
template:`<div id="1"><span id="2"><span id="3">vue.js</span></span></div>`,
});
保存，重新打开浏览器，观察HTML元素节点：
可以看到，template的根元素并没有继承我们添加的prop。
所以inheritAttrs的作用就是控制组件的根元素是否继承特性。
三.$attrs指定某个元素继承特性
继续对上面的例子进行改造，在组件template对id=2的元素添加v-bind="$attrs"：
Vue.component('custom-component', {
inheritAttrs: false, //此处设置禁用继承特性
props:['customProp'],
template:`<div id="1"><span id="2" v-bind="$attrs"><span id="3">vue.js</span></span></div>`,
});
保存，查看HTML渲染结果：
我们可以看到，id=2的元素，继承了我们传入的prop。
所以可以知道$attrs的作用是指定某个元素继承属性。
有了 inheritAttrs: false 和 $attrs，你就可以手动决定这些特性会被赋予哪个元素。
以上就是我对Vue特性继承的一些理解，如有不对，欢迎在下方指出。
474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
