开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情

什么是透传

透传 attribute 指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。

自动继承

当一个组件只有一个根节点，透传的 attribute 会自动被添加到根元素上

假如一个子组件只有一个根节点

<div>我是子组件</div>

在父组件中引用同时传入class

<children class="mychildren"></children>

则子组件会自动继承传入的class，渲染为

<div class="mychildren">我是子组件</div>

如果子组件中引用了单个其他组件

<sun-zi></sun-zi>

sun-zi组件中

<div>我是孙子组件</div>

那么父组件传给子组件的class会透传给sun-zi组件，渲染为

<div class="mychildren">我是孙子组件</div>

如果不想一个组件自动地继承 attribute，可以在组件选项中设置 inheritAttrs: false。

如果使用set up语法糖，需要一个额外的 <script> 块来书写这个选项声明

<script>
// 禁用 Attributes 继承
export default {
  inheritAttrs: false
}
</script>

<script setup>

</script>

可以通过使用 v-bind="$attrs" 来实现

假如不想子组件的根节点继承，使用 v-bind="$attrs"

<div>
    <div v-bind="$attrs">我想继承</div>
</div>

最后子组件渲染为

<div>
    <div class="mychildren">我想继承</div>
</div>

加入子组件有多个根节点，直接在想要继承的根节点使用即可

<div>111</div>
<div v-bind="$attrs">我想继承</div>
<div>222</div>

封装了一个input组件，其中input需要不同的提示语，就可以借助透传实现

父组件传入的值

子组件为input绑定attrs

props不接收placeholder属性

就能实现封装的组件不同提示语