Vue 3.0 片段

#概覽

在 Vue 3 中，組件現(xiàn)在正式支持多根節(jié)點(diǎn)組件，即片段！

#2.x 語(yǔ)法

在 2.x 中，不支持多根組件，當(dāng)用戶意外創(chuàng)建多根組件時(shí)會(huì)發(fā)出警告，因此，為了修復(fù)此錯(cuò)誤，許多組件被包裝在一個(gè) <div> 中。

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

#3.x 語(yǔ)法

在 3.x 中，組件現(xiàn)在可以有多個(gè)根節(jié)點(diǎn)！但是，這確實(shí)要求開(kāi)發(fā)者明確定義屬性應(yīng)該分布在哪里。

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

有關(guān) attribute 繼承如何工作的詳細(xì)信息，見(jiàn)非 Prop Attributes。