Vue3：defineOptions中inheritAttrs透传的用法和使用场景

场景：在vue的父组件使用子组件时，子组件写了某些属性（如：class、style、id和监听器@click 等），但并未被props和emit声明接收，这些属性和事件被称为 “透传属性”。Vue 会自动将这些透传属性绑定到子组件的根节点上。

<!-- MyButton.vue (子组件) --> <template> <div> <button>点击我</button> </div> </template> <!-- 在Parent.vue 父组件中使用--> <MyButton @click="handleClick" /> 默认情况下：由于 MyButton 没有声明 class 和 @click，Vue 会自动把它们透传到根节点 <div> 上。渲染出的 DOM 变成： <div @click="handleClick"> <button>点击我</button> </div> 出现问题： 问题来了： 1、样式错乱：本意是想让 large 类名作用在内部的 <button> 上，结果却作用到了外层的 <div> 上。 2、事件错位：点击按钮时希望触发事件，但点击div的空白区域也会触发事件。 如何避免 使用 defineOptions 关闭自动透传到根节点，手动精准透传到期望的内部元素上 <!-- MyButton.vue (子组件优化版) --> <script setup> 1、使用 defineOptions 关闭自动透传 defineOptions({ inheritAttrs: false // 关键点：告诉Vue不要自动把透传属性绑到根