[元件] 把 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.
