透传属性$attrs

前言

我们首先在父组件上面定义一些数据

vue 复制代码

<template>
  <div class="box">
    <h3>父组件</h3>
    <h4>姓名1:{{ name1 }}</h4>
    <h4>姓名2:{{ name2 }}</h4>
    <h4>姓名3:{{ name3 }}</h4>
    <h4>姓名4:{{ name4 }}</h4>
    <Child />
  </div>
</template>

<script setup lang="ts">
import Child from './Child.vue'
import { ref } from 'vue';
let name1 = ref('张三');
let name2 = ref('王五');
let name3 = ref('李四');
let name4 = ref('赵六');
</script>

那我现在想把父组件的一个name传给子组件怎么做呢？用props最简单

vue 复制代码

    <Child :name1="name1" />

子组件只要接受一下就行了

vue 复制代码

<template>
  <div class="box">
    <h3>子组件</h3>
    <h4>{{ name1 }}</h4>
    <GrandChild />
  </div>
</template>

<script setup lang="ts">
import GrandChild from './GrandChild.vue';
defineProps(['name1'])

</script>

那我可不可以将四个name都传过去呢，答案是可以的

vue 复制代码

    <Child :name1="name1" :name2="name2" :name3="name3" :name4="name4" />

那如果我子组件只接受一个，其他三个跑哪里去了呢？因为归根揭底我父组件确实传给你了，我们使用vue扩展找找看在哪里

我们发现在子组件中声明过props的就会在props立马，没有声明的都会在attrs，那是不是我们直接使用这个也会将变量读出来，我们来试试

vue 复制代码

<template>
  <div class="box">
    <h3>子组件</h3>
    <h4>{{ name1 }}</h4>
    <h4>{{ $attrs }}</h4>
    <GrandChild />
  </div>
</template>

那如何传给孙组件呢？

先来介绍一下概念

"透传"指的是将父组件传递的、但未被子组件声明为 props 的属性，直接传给子组件内部的某个元素。

想传给孙组件，子组件什么都不需要做？只需要把$attrs通过props给孙组件就可以了

vue 复制代码

<template>
  <div class="box">
    <h3>子组件</h3>
    <GrandChild v-bind="$attrs" />
  </div>
</template>

<script setup lang="ts">
import GrandChild from './GrandChild.vue';
</script>

然后孙组件只需要接受就可以了

vue 复制代码

<template>
  <div class="box">
    <h3>孙组件</h3>
    <h4>姓名1:{{ name1 }}</h4>
    <h4>姓名2:{{ name2 }}</h4>
    <h4>姓名3:{{ name3 }}</h4>
    <h4>姓名4:{{ name4 }}</h4>
  </div>
</template>

<script setup lang="ts">
defineProps(['name1', 'name2', 'name3', 'name4'])
</script>