Vue3组件事件及属性绑定的小插曲

最新推荐文章于 2025-02-23 22:34:04 发布

陪我去看海吧！

最新推荐文章于 2025-02-23 22:34:04 发布

阅读量744

点赞数

分类专栏：学习笔记文章标签： vue vue.js typescript

本文链接：https://blog.youkuaiyun.com/hahaha918/article/details/107942850

版权

学习笔记专栏收录该内容

13 篇文章

订阅专栏

本文探讨了Vue3中组件事件和属性绑定的问题。默认情况下，子组件的最外层元素会继承事件和属性，可能导致不期望的行为。通过设置`inheritAttrs: false`阻止最外层标签继承属性，并使用`$attrs`批量或按需将属性绑定到内部元素，以实现更精确的事件控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件绑定的事件及属性

默认会让子组件里的最外层标签继承事件及属性（不包括template）

// Demo.vue
<div>
// 这里是Button.vue 组件
	<Button
	@click='console.log(1)'
	@focus='console.log(1)'
	@mouseover='console.log(1)'
	size='big'
	>
	</Button>
</div>

在上面组件中绑定的事件和属性默认都会被下面div继承，假如div宽比button大，则只要鼠标移入div就会触发mousover事件，这是不好的。那么我们应该如何解决这个事？

// Button.vue
<template>
	<div>
		<button>
		</button>
	</div>
</template>

如何让组件的内部的标签触发事件

第一步先让div不继承属性
这一步操作就是在 Button.vue 里的 script 里加入 inheritAttrs: false ，这是让组件最外层不继承属性

	// Button.vue
		<template>
			<div>
				<button v-bind="$attrs">
				</button>
			</div>
		</template>

第二步让div里的标签绑定到属性或者事件
这里可以用到 $attrs 可以批量绑定属性，就是把组件绑定的事件和属性，全部绑定到button标签上。
上面是全部绑定在一个标签，其实也可以分开绑定个别属性，那就是在 setup 函数里添加两个参数，props和context，这里用context.attrs获取到的和 $attrs 是一样的再用解构就可以了。

// Button.vue
setup(props,context) {
	const { size, ...rest } = context.attrs
	return { size, rest }
}
// 这样就成功分离出size属性了,再return出去就可以用了