vue3 基于 vant 组件二次封装 attribute/inheritAttrs 使用

基于 vant button 二次封装

<template>
  <div>
    <slot>
      <van-button type="primary" size="large"></van-button>
    </slot>
  </div>
</template>

<Button round></Button>

想要 button 原来的属性 v-bind=“$attrs”

<template>
  <div>
    <slot>
      <van-button v-bind="$attrs" type="primary" size="large"></van-button>
    </slot>
  </div>
</template>

<Button round @click="handleBtn"></Button>

你会发现 handleBtn 会调用两遍 inheritAttrs : false
如果你不希望组件的根元素继承 attribute，可以在组件的选项中设置 inheritAttrs: false。

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