vue3组件绑定事件

vue3绑定属性新特性

默认所有属性都绑定到组件的根元素

//父组件
<template>
  <component size="mini" @click="onClick" @focus="onFocus"></component>
</template>
//子组件
<template>
  <button></button >
<template>
//相当于
<template>
  <button size="mini" @click="onClick" @focus="onFocus"></button >
<template>

如果不想绑定属性到根元素，可以配置inheritAttrs:false

//子组件
<template>
  <button></button>
</template>
<script lang="ts">
export default {
  inheritAttrs:false，// 默认绑定到根元素配置项
}
</script>

vue3新特性 ：$attrs是一个对象，包含了该元素的所有绑定事件

//子组件
<template>
  <div>
    <button v-bind="$attrs"></button >
  </div>
<template>
// 相当于
<template>
  <div>
    <button size="mini" @click="onClick" @focus="onFocus"></button >
  </div>
<template>

另一种批量绑定属性的方法是用setup的context.attrs

//子组件
<template>
   <div size="mini">
    <button @click="onClick" @focus="onFocus"></button>
   </div>
</template>
<script lang="ts">
export default {
  setup(props,context) {
    const { onClick, size,onFocus } = context.attrs;
    return { size , onClick, onFocus };
  },
};

批量绑定属性可使用...剩余操作符

//子组件
<template>
   <div size="mini">
    <button v-bind="rest"></button>
   </div>
</template>
<script lang="ts">
export default {
  setup(props,context) {
    const { size , ...rest } = context.attrs;
    return { size, rest  };
  },
};