useAttrs

2023年10月24日

柏拉文

越努力，越幸运

一、认识

---

useAttrs 同 $attrs 作用一样, 主要用于子组件获取父组件中没有通过 props 或者 emits 接收的属性和自定义事件。

二、语法

---

父组件

<template>
  <Child :a="a" :b="b" :c="c" @handleChange="handleChange" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Child from './components/Child.vue';

const a = ref(0);
const b = ref(1);
const c = ref(2);

const handleChange = value => {
  console.log(value);
};
</script>

子组件

<template>
  <div>
    <h3>Child 组件</h3>
    {{ $attrs.a }}
    {{ $attrs.b }}
    {{ $attrs.c }}
    <button @click="$attrs.onHandleChange">改变</button>

    <GrandChild v-bind="$attrs" />
  </div>
</template>

<script setup>
import { useAttrs } from 'vue';
import GrandChild from "./GrandChild.vue"

const attrs = useAttrs();
console.log('attrs', attrs);
</script>

孙组件

<template>
  <div>
    <h3>GrandChild 组件</h3>
    {{ $attrs.a }}
    {{ $attrs.b }}
    {{ $attrs.c }}
    <button @click="$attrs.onHandleChange">改变</button>
  </div>
</template>

<script setup>
import { useAttrs } from 'vue';

const attrs = useAttrs();
console.log('attrs', attrs);
</script>