[vue3进阶] 10.非 Prop 的 Attribute

非 Prop 的 Attribute

这个念着费劲，我们还是通过一个小例子来学习它，
先写了一个简单的组件，叫girlFriend，它接受一个prop——name表示名字

使用时候就是这样

我们给它写了一个name属性‘石原里美’
如果我在使用时，多写一个属性，这个属性在组件的prop里没有定义，比如

那这个age属性就是非 Prop 的 Attribute，就是我们在使用组件时，写了组件里并没有定义的props或者emits
age我们在组件里就没有定义过
那这样vue也是不会报错的，
会产生什么样的结果呢，我们看一下页面上最后渲染出来的html结构

  
石原里美

组件渲染的结果就是这样，age属性被原封不动放到了组件最外层的div上
同样，我们在给组件增加一个非 Prop 的 Attribute

那么最后组件渲染的结果

  
石原里美

class属性也渲染到了div标签上

inheritAttrs

那如果子组件不想要这些父组件传来的没有定义过的属性，就可以通过inheritAttrs来设置

inheritAttrs设置为false以后，渲染的结果就是

  
石原里美

这样div上就很干净了，什么都没有了

$attrs

如果你想在子组件的代码中使用这些非 Prop 的 Attribute，可以用this.$attrs获取到

打印结果我们获取到了一个proxy对象，里面有age和class属性，

你甚至可以把它们绑定给子组件里面的标签
再次修改我们的girlFriend组件

这样就把这些非 Prop 的 属性绑定到了h1标签上
结果就是这样的

  
石原里美

这些属性都跑到了h1上

这篇的内容就到这里了，实际开发中用得也不多，了解一下就行了。