如果我们在子组件里设置 inheritAttrs: false：
components:{
'mytest':{
template:`<div>这是个h1标题{{title}}</div>`,
props:['title'],
inheritAttrs: false,
data(){
return{
mag:'111'
}
},
created:function(){
console.log(this.$attrs)//注意这里
}
}
渲染效果如下：
不继承的情况.png
补充：说一下$attrs的使用
有一个页面由父组件，子组件，孙子组件构成，如下：
<template>
<div style="padding:50px;">
<childcom :name="name" :age="age" :sex="sex"></childcom>
</div>
</template>
<script>
export default {
'name':'test',
props:[],
data(){
return {
'name':'张三',
'age':'30',
'sex':'男'
}
},
components:{
'childcom':{
template:`<div>
<div>{{name}}</div>
<grandcom v-bind="$attrs"></grandcom>
</div>`,
props:['name'],
components: {
'grandcom':{
template:`<div>{{$attrs}}</div>`,
}
}
}
}
}
</script>
上面的代码在页面的效果是如下图
如果attrs被绑定在子组件childcom上后，我们就可以在孙子组件grandcom里获取到this.$attrs的值。这个{{$attrs}}的值是父组件中传递下来的props（除了子组件childcom组件中props声明的）。
记住孙子组件grandcom里获取到this.$attrs的值是除了子组件childcom声明的元素！记住是除了子组件childcom声明的元素！例如上面的代码我在子组件childcom组件的props里声明了name，那么我在孙子组件grandcom里获取到的$attrs就不包含name属性，那么this.$attrs = { ‘age’:’30’, ‘sex’:’男’}。
说一下$attrs的优势到底在哪
假如我们要做一个页面，有父组件，子组件，孙子组件，如下：
<template>
<div>
<childcom></childcom>
</div>
</template>
<script>
export default {
'name':'test',
props:[],
data(){
return {
'name':'张三',
'age':'30',
'sex':'男'
}
},
components:{
'childcom':{
