10.Vue3的必备技能点（九）: attrs

一、attrs的定义

1、基本概念

• attrs 主要接收没在 props 里定义，但父组件又传过来的属性；

• 在<script setup> 语法糖中，需要引入 vue 中的 useAttrs，在调用 useAttrs 后会返回当前未被 props 接收的属性；

<!-- 父组件 -->
<template>
    <child name="one-child" data="123" msg="hello world!"/>
</template>

<script setup>
    import child from '../com/child.vue'
</script>


<!-- 子组件 -->
<template>
   <div>
       props的传值：{
  { msg }}
   </div>
   <div>
       attrs的传值：{
  {attrs}}
   </div> 
</template>
 
<script setup>
  defineProps({
     msg: {
        type: String
     }
  })
</script>

<!-- 界面展示 -->
props的传值：  hello world!
attrs的传值：  { name : "one-child" , data : "1