非 Prop 的 Attribute
这个念着费劲，我们还是通过一个小例子来学习它，
先写了一个简单的组件，叫girlFriend，它接受一个prop——name表示名字
<template>
<div>
<h1>{{ name }}</h1>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: '',
},
},
}
</script>
<style></style>
使用时候就是这样
<girl-friend name="石原里美"></girl-friend>
我们给它写了一个name属性‘石原里美’
如果我在使用时，多写一个属性，这个属性在组件的prop里没有定义，比如
<girl-friend name="石原里美" age="20"></girl-friend>
那这个age属性就是非 Prop 的 Attribute，就是我们在使用组件时，写了组件里并没有定义的props或者emits
age我们在组件里就没有定义过
那这样vue也是不会报错的，
会产生什么样的结果呢，我们看一下页面上最后渲染出来的html结构
<div age="20">
<h1>石原里美</h1>
</div>
组件渲染的结果就是这样，age属性被原封不动放到了组件最外层的div上
同样，我们在给组件增加一个非 Prop 的 Attribute
<girl-friend name="石原里美" age="20" class="my-girl"></girl-friend>
那么最后组件渲染的结果
<div age="20" class="my-girl">
<h1>石原里美</h1>
</div>
class属性也渲染到了div标签上
inheritAttrs
那如果子组件不想要这些父组件传来的没有定义过的属性，就可以通过inheritAttrs来设置
<template>
<div>
<h1>{{ name }}</h1>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: '',
},
},
inheritAttrs: false, // 新增
}
</script>
<style></style>
inheritAttrs设置为false以后，渲染的结果就是
<div>
<h1>石原里美</h1>
</div>
这样div上就很干净了，什么都没有了
$attrs
如果你想在子组件的代码中使用这些非 Prop 的 Attribute，可以用this.$attrs获取到
<template>
<div>
<h1>{{ name }}</h1>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: '',
},
},
inheritAttrs: false,
mounted() {
console.log(this.$attrs) // 新增
},
}
</script>
<style></style>
打印结果我们获取到了一个proxy对象，里面有age和class属性，
你甚至可以把它们绑定给子组件里面的标签
再次修改我们的girlFriend组件
<template>
<div>
<h1 v-bind="$attrs">{{ name }}</h1>
</div>
</template>
这样就把这些非 Prop 的 属性绑定到了h1标签上
结果就是这样的
<div>
<h1 age="20" class="my-girl">石原里美</h1>
</div>
这些属性都跑到了h1上
这篇的内容就到这里了，实际开发中用得也不多，了解一下就行了。
