$attrs
- 适用于当前组件的
父组件和当前组件（孙组件）的子组件通信，便于理解可以视为「祖孙」间通信 - 父组件
<template>
<div class="father">
父组件
<Son :dataName="dataNameVal" :data="objC" :aDun="aDunFun" @bDun="aDunFun" />
</div>
</template>
<script setup>
import { ref } from "vue"
import Son from "./Son.vue"
let dataNameVal = ref("696")
let objC = reactive({name:'哈哈哈'})
function aDunFun(){
console.log('aDunFun111')
}
</script>
- 子组件 $attrs
<template>
<div class="son">
<Sun v-bind="$attrs"/>
</div>
</template>
- 孙组件
- 1、
setup函数使用context的attrs
<script>
export default {
setup(props, context) {
const attrs = context.attrs();
attrs.dataName;//使用祖级属性
attrs.aDun();//调用祖级属性绑定的函数：aDun
attrs.onBDun();//调用祖级的事件：bDun
}
}
</script>
2、<script setup>中使用useAttrs
<script setup>
import { useAttrs } from "vue"
const attrs = useAttrs();
attrs.dataName; //使用祖级属性
attrs.aDun(); //调用祖级属性绑定的函数：aDun
attrs.onBDun(); //调用祖级的事件：bDun
</script>
3、<script setup>中使用defineProps
<script setup>
import { defineProps } from "vue"
let props = defineProps(["dataName", 'aDun', 'onBDun']);
props.dataName; //使用祖级属性
props.aDun(1); //调用祖级属性绑定的函数：aDun
props.onBDun(2); //调用祖级的事件：bDun
</script>
- 注：
<script setup>中如果使用defineProps接受了某个属性，useAttrs()则没有该属性
