Is there no way to reliably handle slot contents in Vue 3?

Question

I'm currently migrating a Vue2 codebase to Vue3. &lt;card&gt;&lt;template#default&gt;&lt;card-header&gt;&lt;titlelevel="3"&gt;Header&lt;/title&gt;&lt;/card-header&amp

P粉865900994 · Answer

The design of your card component doesn't look meaningful to me. I suggest you reconsider.

This is a simple playground rendering slot

const { createApp, h } = Vue;

const Card = {
  setup(props, { attrs, slots, emit, expose }) {
      return () => [           
          h('label', 'Card'),
          h('div', 'Slots:'),
          h('div', {}, slots.default()),
          h('div', {}, slots.header()),
          h('div', {}, slots.body()),
          h('div', {}, slots.footer())
      ]
  }
}

const App = { 
  components: { Card },
  data() {
    return {
    }  
  }
}
const app = createApp(App)
app.mount('#app')

#app { line-height: 2; }
[v-cloak] { display: none; }
label { font-weight: bold; }

Please heed the warning. Vue won't render card-header here because it can't parse it.

[Vue warn]: Failed to resolve component: card-header
If this is a native custom elemen

If you have access to the data, why are you passing the slots action card-body/card-footer items directly through bodyCount?

If it doesn't look reasonable to me.

const { createApp, h } = Vue;

const CardHeader = {
    template: 'card-header: '
}
const CardBody = {
    template: 'card-body: '
}
const CardFooter = {
    template: 'card-footer: '
}

const Card = {
  components: {
    CardHeader, CardBody, CardFooter
  },
  setup(props, { attrs, slots, emit, expose }) {
      //console.log(slots.default())
      return () => [           
          h('label', 'Card'),
          h('div', 'Slots:'),
          h('div', {}, slots.default()),
      ]
  }
}

const App = { 
  components: { Card, CardHeader, CardBody, CardFooter },
  data() {
    return {
      bodyCount: ['a','b'],
      footerCount: ['a','b']
    }  
  }
}
const app = createApp(App)
app.mount('#app')

#app { line-height: 2; }
[v-cloak] { display: none; }
label { font-weight: bold; }
.card-header, .card-body, .card-footer {
  border: 1px solid #F0F0F0;
}

P粉440453689 · Answer

It turns out - fragments can be expanded via the Children property on each element of the array. So in this case, v-for produces a v node, which is a fragment, but we can infer more by looking at the Children property.