[元件] 把 attr、event、slot，直接 Passthrough 給子元件，製作包裝元件
用來複寫給專案用的元件，用於在既有 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
