Vue组件之属性及监听器穿透attrs

1. 穿透案例
父组件

<template>
  <div>{{ message }}</div>
  <!--这里定义的@click事件是classtest组件的button按钮的click事件-->
  <classtest :class="classes" name="11111" @click="updatemessage" />
</template>
<script setup>
import { ref } from "vue";
import classtest from "./components/classtest.vue";

let message = ref("点击按钮我会被修改");

let classes = ref("fontsize");

function updatemessage() {
  message.value = "按钮被点击,我被修改了";
}
</script>
<style scoped>
</style>

子组件

<template>
  <!--附加父组件class属性-->
  <div :class="$attrs.class">{{ message }}</div>
  <br />
  <!--通过v-bind附加父组件所有属性属性-->
  <!--这个button接收了父组件的click事件,但是本身也有click事件
  此时既会执行父组件的click事件方法,也会执行此组件的click事件方法-->
  <button v-bind="$attrs" @click="aa">点击修改文字</button>
</template>

<script setup>
import { ref } from "vue";

let message = ref("这里的字体大小是外部传递的");

function aa() {
  console.log("12222222");
}
</script>

<style>
.fontsize {
  font-size: 23px;
}
</style>

2. 如何禁用继承

defineOptions({
  inheritAttrs: false
})

3. 访问穿透属性
在 <script setup> 中使用 useAttrs() API

<template>
</template>

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

<style>
</style>

没有使用 <script setup>

<template>
</template>

<script>
export default {
  setup(props, ctx) {
    // 透传 attribute 被暴露为 ctx.attrs
    console.log(ctx.attrs)
  }
}
</script>

<style>
</style>