是否沒有辦法可靠地處理 Vue 3 中的槽內容？

Question

我目前正在將 Vue 2 程式碼庫遷移到 Vue 3。

<card>
    <template #default>
        <card-header>
            <title level="3">Header</title>
        </card-header>
        <card-body
            v-for="b in bodyCount"
            :key="'b' b">
            Body {{ b }}
        </card-body>
        <card-footer
            v-for="f in footerCount"
            :key="'f' f">
            <text>Footer {{ f }}</text>
        </card-footer>
    </template>
</card>

Card 元件有一個呼叫 this.$slots.default() 的渲染函數。然而，在 Vue 3 中，這會傳回與 Vue 2 中不同的內容。因此，如果我執行console.log(this.$slots.default()) - 我會得到一個包含3 個元素的數組，[類型為「header」的v 節點，類型為Symbol(Fragment) 的v 節點，類型為Symbol(Fragment) 的v 節點]

更具體地說，它不會將卡頁腳/卡體識別為組件，而是我在類型中看到符號（片段）。 Card-header 實際上很好，因為它不在 v-for 循環中。

卡片組件的渲染函數內部有一個邏輯，需要知道它有多少個正文/頁腳組件。所以我需要能夠分辨組件類型。這在 Vue 3 中不可能嗎？我可以猜測這與這裡的 v-for 有關，但我不確定如何實際獲得最終結果 v-nodes。在此範例中，我希望陣列包含卡頭 所有卡體 所有卡頁腳，而不是 3 個元素。

Answer 1

你的卡片組件的設計對我來說看起來沒有意義。我建議你重新考慮一下。

這是簡單的遊樂場渲染槽

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>

請注意警告。 Vue 不會在此處渲染 card-header，因為它無法解析它。

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

如果您可以存取數據，為什麼要透過slots操作card-body/card-footer專案直接透過bodyCount？

如果對我來說看起來不合理。

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

事實證明 - 可以透過陣列每個元素上的 Children 屬性來展開片段。因此，在這種情況下，v-for 會產生一個 v 節點，它是一個片段，但我們可以透過查看 Children 屬性來推斷更多內容。