Vue3 属性绑定

在写 Vue3 项目的过程中注意到当父组件给子组件传属性和事件时默认是将所有属性绑定到子组件的 根元素 上

//  父组件
<template>
    <h2>示例1</h2>
    <div>
        <Button 
        @click="onclick"
        @focus="onClick"
        @mouseover="onClick">
        你好
        </Button>
    </div>
</template>

//  子组件
<template>
//  默认绑定到根元素 div 上
    <div >
        <button>
            <slot/>
        </button>
    </div>
</template>

如何根据具体需求进行绑定呢？

1. 指定 button 元素拥有全部属性

• 使用 inheritAttrs: false 取消默认绑定
• 使用 $attrs 或者 context.attrs 获取所有属性
• 使用 v-bind="$attrs" 批量绑定属性

// 子组件
<template>
   <div >
       <button v-bind="attrs">
       <slot />
   </button>
   </div>
</template>
<script lang="ts">
export default {
   inheritAttrs:false,
   setup(props,context){
       const attrs = context.attrs
       return {attrs}
   }
}
</script>

2. 指定元素批量绑定属性

将 onClick 事件绑定给根元素 div，其余 rest 绑定给 button

• 通过 ES6 剩余操作符 ...rest 将除 onClick 事件外放在 rest 中并 return { onClick, rest}

//  子组件
<template>
    <div @click="onclick">
        <button v-bind="rest">
        <slot/>
    </button>
    </div>
</template>
<script lang="ts">
export default {
    inheritAttrs:false,
    setup(props,context){
        const {onClick,...rest} = context.attrs
        return {onClick,rest}
    }
}
</script>