# Inline Template 属性
breaking

# 概要

inline-template 機能 (opens new window)のサポートは終了しました。

# 2.x での構文

Vue 2.x では子コンポーネントの内部のコンテンツを分散コンテンツではなく、テンプレートとして使うようにするために子コンポーネントに inline-template 属性を提供していました。

<my-component inline-template>
  <div>
    <p>これらはコンポーネント自身のテンプレートとしてコンパイルされます。</p>
    <p>親のトランスクルージョンコンテンツではありません。</p>
  </div>
</my-component>

1
2
3
4
5
6

# 3.x での構文

この機能はサポートされなくなります。

# 移行の戦略

inline-template のユースケースの多くでは、すべてのテンプレートが HTML ページ内に直接書かれるようなビルドツールを使わないセットアップを想定しています。

# オプション #1: `<script>` タグを使う

このような場合の最も簡単な回避策は、<script> を代替として使うことです:

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

1
2
3

そしてコンポーネントの中でセレクタを使ってテンプレートをターゲットにします:

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

1
2
3
4

これはビルドセットアップを必要とせず、すべてのブラウザで動作し、DOM 内の HTML 解析に関係する警告対象にならず（例えばキャメルケースのプロパティ名を使えます)、ほとんどの IDE で適切なシンタックスハイライトを提供します。従来のサーバーサイドのフレームワークでは、これらのテンプレートをサーバーテンプレートのパーシャル（メインの HTML テンプレートに含まれます）に分割して保守性を向上させることができます。

# オプション #2: デフォルトのスロット

前に inline-template を使っていたコンポーネントは、デフォルトのスロットを使ってリファクタリングすることもできます。デフォルトのスロットを使うことで子コンテンツをインラインで書く利便性を保ちながらデータスコープをより明確にします:

<!-- 2.x での構文 -->
<my-comp inline-template :msg="parentMsg">
  {{ msg }} {{ childState }}
</my-comp>

<!-- デフォルトのスロットを使うバージョン -->
<my-comp v-slot="{ childState }">
  {{ parentMsg }} {{ childState }}
</my-comp>

1
2
3
4
5
6
7
8
9

子ではテンプレートを提供しないかわりにデフォルトの slot* をレンダリングする必要があります:

<!--
  子テンプレートでは、必要な子のプライベート状態を渡しながら
  デフォルトのスロットをレンダリングします。
-->
<template>
  <slot :childState="childState" />
</template>

1
2
3
4
5
6
7

Note: 3.x ではネイティブの fragments サポートを使うことでスロットをルートとしてレンダリングできます！

← グローバル API の Treeshaking キーコード修飾子 →

# Inline Template 属性 breaking