Vue 3.0 內(nèi)聯(lián)模板 Attribute

#概覽

對(duì)內(nèi)聯(lián)特性的支持已被移除。

#2.x 語法

在 2.x 中，Vue 為子組件提供了 inline-template attribute，以便將其內(nèi)部?jī)?nèi)容用作模板，而不是將其作為分發(fā)內(nèi)容。

<my-component inline-template>
  <div>
    <p>它們被編譯為組件自己的模板</p>
    <p>不是父級(jí)所包含的內(nèi)容。</p>
  </div>
</my-component>

#3.x 語法

將不再支持此功能。

#遷移策略

inline-template 的大多數(shù)用例都假設(shè)沒有構(gòu)建工具設(shè)置，所有模板都直接寫在 HTML 頁面中

#選項(xiàng) #1：使用 <script> 標(biāo)簽

在這種情況下，最簡(jiǎn)單的解決方法是將 <script> 與其他類型一起使用：

<script type="text/html" id="my-comp-template">
  <div>{{ hello }}</div>
</script>

在組件中，使用選擇器將模板作為目標(biāo)：

const MyComp = {
  template: '#my-comp-template'
  // ...
}

這不需要任何構(gòu)建設(shè)置，可以在所有瀏覽器中工作，不受任何 DOM HTML 解析警告的約束 (例如，你可以使用 camelCase prop 名稱)，并且在大多數(shù) ide 中提供了正確的語法高亮顯示。在傳統(tǒng)的服務(wù)器端框架中，可以將這些模板拆分為服務(wù)器模板部分 (包括在主 HTML 模板中)，以獲得更好的可維護(hù)性。

#選項(xiàng) #2：默認(rèn) Slot

以前使用 inline-template 的組件也可以使用默認(rèn) slot——進(jìn)行重構(gòu)，這使得數(shù)據(jù)范圍更加明確，同時(shí)保留了內(nèi)聯(lián)編寫子內(nèi)容的便利性：

<!-- 2.x 語法 -->
<my-comp inline-template :msg="parentMsg">
  {{ msg }} {{ childState }}
</my-comp>
<!-- 默認(rèn) Slot 版本 -->
<my-comp v-slot="{ childState }">
  {{ parentMsg }} {{ childState }}
</my-comp>

子級(jí)現(xiàn)在應(yīng)該渲染默認(rèn) slot*，而不是不提供模板：

<!--
  在子模板中，在傳遞時(shí)渲染默認(rèn)slot
  在必要的private狀態(tài)下。
-->
<template>
  <slot :childState="childState" />
</template>

• 提示：在 3.x，slot 可以渲染為具有原生 fragments 支持的根目錄！