在父组件给子组件的按钮绑定点击事件时，并不是给按钮绑定了，而是给子组件的根元素绑定了事件
比如，给子组件的按钮绑定一个点击事件，这个时候点击子组件的其他部份也会执行此事件（红色为自组件区域，点击红色区域也会执行）
因为，Vu3默认所有的属性都绑定到根元素上了
父组件,给子组件Button绑定事件属性
template>
<div>
<Button @click="onClick"
@focus="onClick"
@mouseover="onClick"
size="small"
>button</Button>
</div>
</template>
<script lang="ts">
import Button from '../lib/Button.vue'
export default {
components: {
Button
},
setup() {
const onClick = () => {
console.log('hi')
}
return {
onClick
}
}
}
</script>
子组件,父元素绑定的事件,都在div上
<template>
<div>
<button>
<slot />
</button>
</div>
</template>
他会自动把方法绑定到子组件的根元素，所以点击子组件的任何一个部分都会触发执行该方法。
那我只想点击某一部分才会触发事件，该怎么办呢？
第一步：不让根元素继承属性
在子组件写 inheritAttrs:false 继承属性改为false
<template>
<div>
<button >
<slot />
</button>
</div>
</template>
<script lang="ts">
export default {
+ inheritAttrs:false
}
</script>
第二步：让事件绑定到某部分
$attrs是父组件传递过来的所有属性
<template>
<div>
+ <button v-bind="$attrs">
<slot />
</button>
</div>
</template>
<script lang="ts">
export default {
inheritAttrs:false
}
</script>
扩展：
把所有的事件分成两部分，分别给不同的元素 在子组件使用剩余操作符 ...
<template>
<div :size="size">
<button v-bind="rest">
<slot />
</button>
</div>
</template>
<script lang="ts">
export default {
inheritAttrs: false,
setup(props, context) {
//size作为一个方法，剩下的用rest包括了
const {
size,
...rest //剩下的就是rest
} = context.attrs
return {
size,
rest
}
}
}
</script>
props和attrs的区别
- props要先声明，才能取值，attrs不用声明
- props不包含事件，attrs包含
- props没有什么声明的属性，会跑到attrs里
- props支持string以为的类型，attrs只有string类型
