九 分分钟学会 vue3 透传 Attributes

1. 透传 Attributes，默认绑定属性

如果父组件给子组件绑定属性，默认会绑定在子组件的根元素上，并且如果子组件的根元素已经有了 class 或 style，那么会和父组件传递过来的属性合并, 子组件的其他的自定义属性会被父组件传递过来的覆盖

如果父组件给子组件绑定原生事件，默认会绑定在子组件的根元素上，点击子组件会触发父组件的绑定的事件

父组件

<template>
  <div class="about">
    <!-- 使用自定义组件 绑定class属性-->
    <CustomComponent style="color: #f00f00" c="ff" class="aaa" @click="clickChild"></CustomComponent>
  </div>
</template>

<script setup lang="ts">
// 引入自定义组件
import CustomComponent from '@/components/CustomComponent.vue'

const clickChild = () => {
  console.log("点击了子组件触发")
}
</script>

子组件

<template>
  <div class="bb" c="dd">
      我是子组件
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped></style>

2. 通过$attrs访问传参

父组件

<template>
  <div class="about">
    <!-- 使用自定义组件 绑定class属性-->
    <CustomComponent style="color: #f00f00" c="ff" class="aaa" @click="clickChild"></CustomComponent>
  </div>
</template>

<script setup lang="ts">
// 引入自定义组件
import CustomComponent from '@/components/CustomComponent.vue'

const clickChild = () => {
  console.log("点击了子组件触发")
}
</script>

子组件

<template>
  <div class="bb" c="dd">
      我是子组件
      <div>

        我是父组件传递过来的参数： {{ $attrs }}
      </div>
     
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped></style>

3. 使用useAttrs访问

父组件

<template>
  <div class="about">
    <!-- 使用自定义组件 绑定class属性-->
    <CustomComponent style="color: #f00f00" c="ff" class="aaa" @click="clickChild"></CustomComponent>
  </div>
</template>

<script setup lang="ts">
// 引入自定义组件
import CustomComponent from '@/components/CustomComponent.vue'

const clickChild = () => {
  console.log("点击了子组件触发")
}
</script>

子组件

<template>
  <div class="bb" c="dd">
      我是子组件
      <div>
        我是父组件传递过来的参数： {{ attrs }}
      </div>
     
  </div>
</template>

<script setup>
import { useAttrs } from "vue";
const attrs = useAttrs()
</script>

<style lang="scss" scoped></style>

4. 注意

（1）attrs 是非响应式的，不能用watch去监听， 如果你需要响应性，可以使用 props。或者你也可以使用 onUpdated()

（2）如果子组件中使用 props 获取了父组件传递的某个参数，那么通过attrs无法获取这个属性