2

Vue.js を使用して、html5 ゲームの UI を構築しています。基本的に他の ui-components をグループ化して画面上のどこかに配置するだけの ui-containers を定義したい場合があります。だから私はこのようなことが起こっている可能性があります:

<ui-container>
  <ui-component1></ui-component1>
  <ui-component2></ui-component2>
  <ui-component3></ui-component3>
</ui-container>

コンテナのコンテンツを表すデータモデルに基づいて、これらのコンポーネントを動的に追加および削除する必要がある場所。問題は、ui-container を一般的なものにしたいので、テンプレートにどのコンポーネントがあるかについての情報がなくても Vue-component を追加できるようにすることです。

私はグーグルで検索し、動的にコンポーネントを注入することに関するこの例を見つけました: http://forum.vuejs.org/topic/349/injecting-components-to-the-dom 例のデータ駆動型バージョンは簡単に作成および理解できましたが、タグに v-for を使用するため、子コンポーネントのタイプを事前に知っておく必要があります。

問題は、その例をどのように一般化して、任意のコンポーネントを動的に操作できるかということです。私のデータモデルにはコンポーネントのタイプまたはタグ名があり、それを v-for で補間する必要がありますか? または、この種の要件に対する既存のメカニズムはありますか?

4

1 に答える 1

2

特別なis属性を使用して、コンポーネントのタイプを動的に設定できます。ここにドキュメントがあります。コードは次のようになります。

<div id="app">
  <div v-for="component in components" :is="component.type" :value="component.value"></div>
</div>

操作するフィドル: Dynamic Vue.js コンポーネント

于 2016-08-29T05:56:41.673 に答える