非 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上

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