4

ドキュメントでこれについて何も見ませんでした。十分に検索しなかった可能性がありますが、コンポーネントテンプレートはルート要素を使用すると「より適切に」機能するようです (より良い意味: Laravel elixir を実行するとルート要素なしで機能しますgulpが、実行gulp --productionすると最初の要素のみが表示されます) ）。

内部にルート要素を 1 つだけ持つ必要があり<template>ますか?

つまり、このテンプレート コードは Vue 2 で使用できますか?

<template>
  <div>A</div>
  <div>B</div>
</template>
4

4 に答える 4

9

すべてのコンポーネントには、ルート要素が 1 つだけ必要です。Fragment インスタンスは許可されなくなりました。次のようなテンプレートがある場合:

<p>foo</p>
<p>bar</p>

次のように、コンテンツ全体を新しい要素で単純にラップすることをお勧めします。

<div>
  <p>foo</p>
  <p>bar</p>
</div>

VueJS ドキュメント

于 2016-11-04T09:31:42.177 に答える
5

コンパイルすることはできますが、Vue は次の警告を表示します。

[Vue 警告]: コンポーネント テンプレートには、ルート要素が 1 つだけ含まれている必要があります:

テンプレートの最初の要素のみを表示するため、次のようにテンプレートを 1 つのルート レベル タグでラップする必要があります。

<template>
  <div>
    <div>A</div>
    <div>B</div>
  </div>
</template>

次の JSFiddle の開発者ツール コンソールを見ると、私の言いたいことがわかるはずです。

https://jsfiddle.net/woLwz98n/

また、この機会に感謝いたしますlaravel-log-viewer。いつも使用しており、優れています。

于 2016-11-04T09:31:20.900 に答える
3

はい、Vue 2.0 テンプレートには単一のルート要素が必要です。親 div を作成し、すべてのコンポーネント div をその中に配置するだけです。

<template>
  <div>
    <div>A</div>
    <div>B</div>
  </div>
</template>

Vue.js 作成者は、この投稿で同じことについて言及しています:
https://github.com/vuejs/vue-loader/issues/384

于 2016-11-04T09:36:46.540 に答える
2

提供された回答に加えて、他の誰かを助けるかもしれないので、2セントを追加するだけだと思いました. （テーブル行の）子コンポーネントがあり、上記の解決策を試みてテーブル行の周りにラッピングdivを配置し続けましたが、親コンポーネントは子ではなくラッピングが必要な部分であり、問​​題は解決されました。したがって、このエラーが発生した親/子コンポーネントの状況にある場合は、親テンプレート コードを div で囲みます。

于 2017-04-06T12:34:30.533 に答える