场景：在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不要自动把透传属性绑到根