N'existe-t-il aucun moyen de gérer de manière fiable le contenu des emplacements dans Vue 3 ?

Question

Je migre actuellement une base de code Vue 2 vers Vue 3.

<card>
    <modèle #default>
        <en-tête de carte>
            <title level="3">En-tête</title>
        </en-tête-de-carte>
        <corps de la carte
            v-for="b dans bodyCount"
            :key="'b' + b">
            Corps {{ b }}
        </corps de la carte>
        <pied de page de la carte
            v-for="f dans footerCount"
            :key="'f' + f">
            <text>Pied de page {{ f }}</text>
        </pied de page de la carte>
    </modèle>
</carte>

Le composant Card possède une fonction de rendu qui appelle this.$slots.default(). Cependant, dans Vue 3, cela renvoie un contenu différent de celui de Vue 2. Donc si je fais console.log(this.$slots.default()) - j'obtiens un tableau avec 3 éléments, [nœud v de type "header", tapez C'est un nœud v de Symbol(Fragment), un nœud v de type Symbol(Fragment)]

Plus précisément, il ne reconnaît pas le pied de page/le corps de la carte en tant que composants, mais je vois le symbole (fragment) dans le type. L'en-tête de carte convient en fait puisqu'il n'est pas à l'intérieur de la boucle v-for.

Il existe une logique à l'intérieur de la fonction de rendu du composant de la carte qui a besoin de connaître le nombre de composants de texte/pied de page dont il dispose. Je dois donc être capable de déterminer le type de composant. N'est-ce pas possible dans Vue 3 ? Je peux supposer que cela a quelque chose à voir avec le v-for ici, mais je ne sais pas comment obtenir les nœuds v finaux. Dans cet exemple, au lieu de 3 éléments, je souhaite que le tableau contienne l'en-tête de la carte + tous les corps de la carte + tous les pieds de page.

Answer 1

La conception du composant de votre carte ne me semble pas significative. Je vous suggère de reconsidérer.

Il s'agit d'un simple emplacement de rendu pour terrain de jeu

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; }

<div id="app">
<card>
    <template #default>
       Default
        <card-header>
            <title level="3">Header</title>
        </card-header>
    </template>
    <template #header>
       Header
    </template>
    <template #body>
       Body
    </template>
    <template #footer>
       Footer
    </template>
</card>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Veuillez tenir compte de l'avertissement. Vue ne rendra pas card-header ici car il ne peut pas l'analyser.

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

Si vous pouvez accéder aux données, pourquoi passer slots操作card-body/card-footer项目直接通过bodyCount ?

Si cela ne me semble pas raisonnable.

const { createApp, h } = Vue;

const CardHeader = {
    template: '<div class="card-header">card-header: <slot></slot></div>'
}
const CardBody = {
    template: '<div class="card-body">card-body: <slot></slot></div>'
}
const CardFooter = {
    template: '<div class="card-footer">card-footer: <slot></slot></div>'
}

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;
}

<div id="app">
<card>
    <template #default>
        <card-header>
            <div level="3">Header</div>
        </card-header>
        bodyCount: {{bodyCount.length}}
        <card-body
            v-for="b in bodyCount"
            :key="'b' + b">
            Body {{ b }}
        </card-body>
        footerCount: {{footerCount.length}}
        <card-footer
            v-for="f in footerCount"
            :key="'f' + f">
            <text>Footer {{ f }}</text>
        </card-footer>
    </template>
</card>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Answer 2

Il s'avère que les fragments peuvent être développés via la propriété Children sur chaque élément du tableau. Donc, dans ce cas, v-for produit un nœud v, qui est un fragment, mais nous pouvons en déduire davantage en examinant la propriété Children.