用來複寫給專案用的元件，用於在既有 UI framework 上打造專案元件

Vue3

Vue2.6

<template>
  <q-btn v-bind="{ ...$attrs, ...$props }" v-on="$listeners">
    <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
      <slot :name="slot" v-bind="scope"/>
    </template>
    <slot></slot>
  </q-btn>
</template>

Vue3

Vue3 裡面只要綁定 $attrs 即可，attrs, props, event 全部自動綁定進去。

<template>
  <q-btn v-bind="$attrs">
    <template v-for="(slot, index) of Object.keys($slots)" :key="index" v-slot:[slot]>
      <slot :name="slot"></slot>
    </template>
    <slot></slot>
  </q-btn>
</template>

Quasar2-TS

Quasar 裡面 Props, Slot 有獨立的 interface 定義，因此可直接拿到。

<template>
  <q-btn v-bind="$attrs">
    <template v-for="(slot, index) of Object.keys($slots)" :key="index" v-slot:[slot]>
      <slot :name="slot"></slot>
    </template>
  </q-btn>
</template>

<script setup lang="ts">
import type { QBtnSlots, QBtnProps } from 'quasar';
import { QBtn } from 'quasar';
const props = withDefaults(defineProps<QBtnProps>(),{
  // here comes default settings
});
</script>

<style scoped></style>

Vuetify3

Vuetify3 裡面 Props, Slot 沒有獨立的 interface 定義，因此需額外定義。 MyBtn.vue

<template>
  <div>
    <v-btn v-bind="$attrs">
      <template v-for="(slot, index) of Object.keys($slots)" :key="index" v-slot:[slot]>
        <slot :name="slot"></slot>
      </template>
    </v-btn>
  </div>
</template>

<script setup></script>

MyBtn.vue.d.ts，這裡要注意"vuetify/components"而不是"vuetify/lib/components"，

import { VBtn } from "vuetify/components";
export default VBtn

Reference