App.vue 544 B

12345678910111213141516171819202122
  1. <script setup lang="ts">
  2. import { ref } from 'vue'
  3. import VaporComp from './VaporComp.vue'
  4. const msg = ref('hello')
  5. const passSlot = ref(true)
  6. </script>
  7. <template>
  8. <input v-model="msg" />
  9. <button class="toggle-vdom-slot-in-vapor" @click="passSlot = !passSlot">
  10. toggle #test slot
  11. </button>
  12. <VaporComp :msg="msg">
  13. <template #default="{ foo }">
  14. <div>slot prop: {{ foo }}</div>
  15. <div>component prop: {{ msg }}</div>
  16. </template>
  17. <template #test v-if="passSlot">A test slot</template>
  18. </VaporComp>
  19. </template>