Vue3属性绑定的细节

默认情况下的绑定：

父组件

<template>
  <div>
    <Button @click="log" size="small">
      点击这里
    </Button>
  </div>
</template>

<script>
import Button from '../lib/Button.vue'
export default {
  components:{ Button },
  setup() {
    const log = ()=>{
      console.log("点击了，打印一下")
    }
    return { log }
  }
}
</script>

子组件

<template>
  <div class="wrapper">
    <button>
        <slot />
    </button>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss">
.wrapper {
  border: 1px solid red;
}
</style>

当我们点击按钮区域和div区域时，都会打印出信息。

原因是vue3会默认将父组件中的元素绑定在子组件上的，就是子组件中的最外层的div，inheritAttrs:false,在子组件中放弃自动绑定，再加工细节，实现自定义绑定。

自定义绑定

全部属性绑定：

使用v-bind="$attrs"和inheritAttrs:false,

<template>
  <div class="wrapper">
    <button v-bind="$attrs">
      <slot />
    </button>
  </div>
</template>

<script>
export default {
  inheritAttrs:false,
}
</script>

<style lang="scss">
.wrapper {
  border: 1px solid red;
}
</style>

选择属性绑定：

<template>
  <div class="wrapper" :size="size">
    <button v-bind="$attrs">
      <slot />
    </button>
  </div>
</template>

<script>
export default {
  inheritAttrs:false,
  setup(props,context) {
    const {size, ...rest} = context.attrs
    return {size,rest}
  }
}
</script>

<style lang="scss">
.wrapper {
  border: 1px solid red;
}
</style>

这样就可以实现自定义属性的绑定，如上代码所示，我们把size的属性给div绑定，剩余的属性都绑定在button上面了。