• 如果我的 button 是被 div 包住的

• 我引用了 Button 组件，并添加了@click、@mouseover，然后我让鼠标点击按钮或放在按钮上都打印出“你好”

• 为了方便观察，给 div 添加一个 border

• 此时，只要在红色边框范围内点击鼠标，或者鼠标移进红色边框范围内，都会打印出“你好”，说明 div 继承了 onClick 属性

• 那么怎么让 div 不继承呢 ？

解决方法

• 先给组件加上 inheritAttrs 属性

• 给 div 内的 button 加上v-bind="$attrs"

• 这样 Button 组件里的 div 就不会默认拥有外面绑定的事件了，而且 button 能拥有外面所有绑定的事件，此时就可以做到只有点击到按钮本身才能打印出“你好”，而红框没任何反应

补充：如果我要所有事件分成两部分，一部分给 div 绑定，一部分给 button 绑定，该怎么做？

• 先看看所有的事件，共有四个

• 在组件中写以下代码

• 这样就可以让 div 只绑定 size，而 button 绑定剩下的所有了

总结

Vue3 属性绑定

• 默认所有属性都绑定到根元素
• 使用 inheritAttrs: false可以取消默认绑定
• 使用 $attrs或context.attrs获取所有属性
• 使用 v-bind="$attrs"批量绑定属性
• 使用 const{size, ...rest} = context.attrs将属性分开（此处 size 为上文的例子）