前言
上一章我们说到,对于单个根元素的子组件来说,使用时在其上面声明的class、style以及事件等,会发生一个透传的行为。但有些时候,我想对透传的属性进行一个自定义继承。这个时候要怎么做呢?这就引出了我们今天的主角--$attrs。下面我们来看一看。
$attrs
我们可以通过$attrs
访问透传进来的属性,不仅如此,$attrs 里面还包含了除组件所声明的 props
和 emits
之外的所有其他属性。
这样我们就可以自定义继承了。
<span>所有属性: {{ $attrs }}</span> 复制代码
但是,还有一点要注意的是,我们还要禁止组件的默认透传行为,这个时候我们就可以通过inheritAttrs
属性,设为 false 来进行禁用。
如果使用了<script setup>
,就需要一个额外的 <script>
标签来添加这个选项:
<script> export default { inheritAttrs: false } </script> <script setup> // ...setup 部分逻辑 </script> 复制代码
注意:
- 透传的属性会保留大小写,所以像这 title-n 样的一个 属性 需要通过
$attrs['title-n']
来访问。- 透传的
v-on
事件监听器可以通过$attrs.onClick
进行访问。
对于多根节点的组件,没有自动的透传行为。如果$attrs没有显示绑定的话,vue会进行一个警告。
所以,对于这种情况的话,需要对其显示绑定:
<header>...</header> <main v-bind="$attrs">...</main> <footer>...</footer> 复制代码
js中访问$attrs
如果想要在<script setup>
访问透传下来的属性的话,需要通过vue 提供的 useAttrs()
API来进行访问透传的所有属性:
<script setup> import { useAttrs } from 'vue' const attrs = useAttrs() </script> 复制代码
有一点需要需要注意的是,useAttrs()得到的attrs并不是响应式的,也就意味着你不能通过侦听器监听他的变化。
所以,需要响应式的话,建议还是props,或者在onUpdated()声明周期内,获得最新的$attrs。