Vue 事件属性绑定默认和修改

Buttondemo组件

<template>
    <Button @click="onClick">你好</Button>
</template>
<script lang="ts">
import Button from '../lib/Button.vue'
export default {
    components:{Button},
    setup(){
      const onClick=()=>{
        console.log('hi')
      }
      return {onClick}
    }
}
</script>

一、Button组件根元素是button

 <template>
    <button>
       <slot />
    </button>
</template>

当我们点击Buttondemo组件click事件时候，正常情况下，点击完就会将事件传入到Button组件中根元素button上。这时我们点击打印出“hi”

1.png

但是如果Button组件根元素不是button，而是div时候，这个时候事件是传入div上，而不是button元素上。

二、Button组件根元素是div

<template>
    <div>
        <button>
            <slot />
        </button>
    </div>
</template>
<style lang="scss" scoped>
  div{
      border:1px solid red;
  }
</style>

当我们点击Buttondemo组件click事件时候，点击完就会将事件传入到Button组件中根元素div上，这时只要我们点击这个div边框之内都能触发click事件。

2.png

三、如何让根元素div里面button触发click事件，
（1）、首先让div不要继承click属性:inheritAttrs:false
（2）、让div里的button绑定事件:v-bind=$attrs $attrs是指所有事件

<template>
<div>
    <button v-bind=$attrs>
        <slot />
    </button>
</div>
</template>
<script lang="ts">
export default {
    inheritAttrs:false    //
}
</script>
<style lang="scss" scoped>
  div{
      border:1px solid red;
  }
</style>

四、当有多个事件属性传入，如何自主放置在不同元素进行触发
（1）、利用context.attrs获取所有属性
（2）、利用ES6析构函数{size,focus,mouseover,click}=context.attrs
（3）、再在不同元素上绑定上面size或focus等

Buttondemo组件

<template>
   <div>
        Button示例
    </div>
    <h1>示例1</h1>
    <div>
        <Button @click="onClick"
                @focus="onClick"
                @mouseover="onClick"
                size="small"
        >你好</Button>
    </div>
</template>

Button组件

<template>
    <div :size="size">
        <button v-bind="rest">
            <slot />
        </button>
    </div>
</template>
<script lang="ts">
export default {
    inheritAttrs:false,
    setup(prop,context){
       const {size,...rest} = context.attrs  //context里面有attrs属性
       return {size,rest}
   }
}
</script>