Vue3的事件绑定，当我们给一个组件绑定事件时，Vue3会默认帮我们把它传给最外层的元素
<template>
<div>button实例</div>
<h1>示例1</h1>
<div>
<Button @click="onClick"
@focus="onFocus"
@mouseover=“onMouseOver"
size=‘small’
>你好
</Button>
</div>
</template>
<script>
import Button from '../lib/Button.vue'
export default {
components: {Button},
setup() {
const onClick = () => {
}
const onFocus = () => {
}
const onMouseOver = () => {
}
return {onClick,onFocus,onMouseOver}
},
}
</script>
问题：如果我们的button被一层div包裹，也就是说点击div就会继承这个click事件，但我们的需求是只点击组件本身才触发应该怎么办
第一步：不让div继承属性
<template>
<div>
<button>
<slot/>
</button>
</div>
</template>
<script lang="ts">
export default {
inheritAttrs:false
}
</script>
此时，绑在组件上的属性没有绑定到任何元素上，我们需要让他们绑定在button元素上
第二步：让div里的button绑定$attrs
$attrs 默认包含所有属性
<template>
<div>
<button v-bind="$attrs">
<slot/>
</button>
</div>
</template>
问题又来了：如果我想让事件绑定在button上但是size属性绑定在div上有怎么办呢
也就是说将属性分两部分绑定
<template>
<div :size="size">
<button v-bind="rest">
<slot/>
</button>
</div>
</template>
<script lang="ts">
export default {
inheritAttrs: false,
setup(props, context) {
const {size, ...rest} = context.attrs//出了size其他的放在rest里面
return{size,rest}
}
}
</script>
总结：
Vue3属性绑定：
默认所有属性绑定到根元素
使用inheritAttrs:false可以取消默认绑定
使用$attrs或者context.attrs可以获取所有属性
使用v-bind=‘$attrs'实现批量绑定
使用{size,…rest} = context.attrs实现将属性分开
