组件传参之useAttrs()

一、useAttrs()API与props类似，不过useAttrs()可以接收到子组件身上的全部属性，举个例子：

父组件：

<!-- 父组件 ListView -->
<template>
    <div >
        <Listchild1 title="梅西夺得世界杯" time="2022卡塔尔世界杯" ></Listchild1>
    </div>
</template>
<script lang="ts" setup>
import Listchild1 from '@/components/List/Listchild1.vue'
</script>

子组件：

<!-- 子组件 Listchild1 -->
<template>
    <div class="chaild1">
        <p>我是list的子组件</p>
    </div>
</template>
<script lang="ts" setup>
import {useAttrs} from 'vue'

let getValue=useAttrs()
console.log(getValue);

</script>
<style scoped>
.chaild1{
    width: 200px;
    height: 200px;
    background-color: pink;
}
</style>

此时打印台就会打印出：

 二、但是useAttrs()和defineProps同时用的话，优先级defineProps>useAttrs()

<!-- 子组件 Listchild1 -->
<template>
    <div class="chaild1">
<p>我是list的子组件</p>
    </div>
</template>
<script lang="ts" setup>
import {useAttrs} from 'vue'
// defineProps优先级 > useAttrs()；如果两个同时用，useAttrs()就无法收到title的属性
let getValueIsprops=defineProps(['title'])
let getValue=useAttrs()
console.log(getValue);

</script>
<style scoped>
.chaild1{
    width: 200px;
    height: 200px;
    background-color: pink;
}
</style>

此时打印台