Button组件

组件属性绑定

封装的 Button 组件要可以支持用户自定义事件，如何做到？

Vue会自动把用户写在 Button 组件上的属性绑定在 Button 组件内的根元素上。

如何取消启动绑定，并手动绑定到组件内特定元素上？

<tempalte>
    <div>示例</div>
    <button v-bind="$attrs">//批量绑定属性
    <slot />  
  </button>
</tempalte>
<script>
    export default {
    inheritAttrs:false //取消自动绑定
    }
</script>
<tempalte>
    <div :size=""size>示例 </div>
    <button v-bind="rest">//绑定属性
    <slot />  
  </button>
</tempalte>
<script>
export default {
    inheritAttrs:false //取消自动绑定
    setup(context){
        const = {size,...rest} = context.attrs //取出特定属性
      return {size,rest}
    } 
}
</script>

“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class、style 和 id。

大量CSS类名添加

Button 组件支持多种自定义类型，如果一个个类名加到元素上会让代码显得很臃肿，遑论类名添加还需要依据对应的外部属性而定。因此我们通过计算属性来添加。

<template>
  <button class="hamburger-button" :class="classes" :disabled="disabled">
  </button>
</template>
<script lang="ts">
import {computed} from 'vue';

export default {
setup(props){
  const {theme,size,level} = props
  const classes =computed(()=>{
    return {
      [`hamburger-theme-${theme}`]: theme,
      [`hamburger-size-${size}`]: size,
      [`hamburger-level-${level}`]: level,
    }
  })
  return {classes}
}
}
</script>
//为阅读方便，删去了与此段叙述关系不大的外部属性获取与声明类型的部分代码