Zenn
Open2

Vue Tips

JavaScript
TypeScript
Vue.js
uto-usuiuto-usui

Vue slot の存在を調べる 🐈

scopedSlots にも対応できるように。

<template v-if="hasSlots()">
  <h1><slot /></h1>
</template>

<script lang="ts">
export default Vue.extend({
  computed: {
    hasSlot() {
        return (name = 'default') => Boolean(this.$slots[name]) || Boolean(this.$scopedSlots[name])
    },
  }
)}
</script>
uto-usuiuto-usui

toRefs() で props を分割代入できるようにする 🐈

<script lang="ts">
export default defineComponent({
  setup(props) {
    const { propA, propB } = toRefs(props)
  }
})
</script>