Skip to content

Slots render issure #10728

Open
Open
@l-x-f

Description

@l-x-f

Vue version

3.4.23

Link to minimal reproduction

https://github.com/l-x-f/vue-slots-render-issure

Steps to reproduce

components/Children0.vue

<template>
  <div>
    <slot name="default">
      <component v-if="$slots.default" :is="$slots.default" />
      <template v-else> default-value</template>
    </slot>
  </div>
</template>

components/Children1.vue

<template>
  <div>
    <slot name="default"> default-value</slot>
  </div>
</template>

App.vue

<template>
  <h3>examples1</h3>
  <Children0>
    <template v-if="false">100</template>
  </Children0>
  <br />

  <h3>examples2</h3>
  <Children0>
    <template v-if="false" #default>100</template>
  </Children0>
  <br />

  <h3>examples3</h3>
  <Children1>
    <template v-if="false">100</template>
  </Children1>
</template>

<script setup>
import Children0 from './components/Children0.vue'
import Children1 from './components/Children1.vue'
</script>

What is expected?

I expected Examples1 to render 'default-value', but there was no rendering.

What is actually happening?

I expected Examples1 to render 'default-value', but there was no rendering.

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
    Memory: 3.98 GB / 15.75 GB
  Binaries:
    Node: 16.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vue: ^3.4.23 => 3.4.23

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions