vue3在父组件引用的子组件名上加上事件,会自动传进子组件的最外层的元素。
Vue3属性绑定
- 默认所有属性都绑定到根元素。
- 使用
inheritAttrs:false可以取消默认绑定。 - 使用$attrs或者context.attrs获取所有属性。
- 使用
v-band = "$attrs"批量绑定属性。 - 使用
const {size,level,...xxx}=context.attrs可以将属性分开。
Vue 3会默认将传给自定义组件的事件传给其模板,事件会作用在包括模板的第一个标签(下例中的div)上。
消除attrs继承
在模板中
export default {
inheritAttrs : false
}
实现点击模板的一部分为事件
如点击button而不是div触发事件。
<template>
<div>
<button v-bind='$attrs'> //也可以使用setup中的context.attrs来获取属性
</div>
</template>