一、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>
此时打印台