创建插槽

<template>
  <view>主页</view>
  <tw-dialog>
    默认插槽
  </tw-dialog>

  <!-- 具名插槽 -->
  <tw-dialog>
    <!-- 可以使用 v-solt: 可以使用 # 替换 -->
    <!-- <template v-slot:tw-dialog-header> -->
    <template #tw-dialog-header>
      <div>
        dialog: 头部
      </div>
    </template>
    <!-- <template v-slot> -->
    <template #default>
      <div>
        dialog: 内容
      </div>
    </template>
    <!-- <template v-slot:tw-dialog-footer> -->
    <template #tw-dialog-footer>
      <div>
        dialog: 头部
      </div>
    </template>
  </tw-dialog>
</template>

<script setup lang='ts'>

</script>
<script lang='ts'>

</script>
<style lang='scss'>
</style>

向指定插槽插入内容

注意：只能使用 template 来实现插槽。

// tw-dialog 为全局注册的组件，因此不用引入
<template>
  <view>主页</view>
  <tw-dialog>
    <template v-slot:tw-dialog-header>
      <div>
        dialog: 头部
      </div>
    </template>
    <template v-slot>
      <div>
        dialog: 内容
      </div>
    </template>
    <template v-slot:tw-dialog-footer>
      <div>
        dialog: 头部
      </div>
    </template>
  </tw-dialog>
</template>

<script setup lang='ts'>

</script>
<script lang='ts'>

</script>
<style lang='scss'>
</style>

动态插槽