Vueコンポーネントを動的に表示する

Vueを使用して、コンポーネントを使用してアプリケーションレイアウトを定義します。最初は、コンポーネントを必要な場所に手動で配置しますが、ある時点で、アプリケーションの状態に基づいてコンポーネントを表示または非表示にする、より柔軟な方法が必要になります。

条件付きディレクティブの使用

最も簡単なオプションは、v-ifそしてv-elseディレクティブ。

これが例です。ザ・v-ifディレクティブはnoTodos計算されたプロパティ。状態プロパティの場合はfalseを返します。todos少なくとも1つのアイテムが含まれています:

<template>
  <main>
    <AddFirstTodo v-if="noTodos" />
    <div v-else>
      <AddTodo />
      <Todos :todos=todos />
    </div>
  </main>
</template>

<script> export default { data() { return { todos: [], } }, computed: { noTodos() { return this.todos.length === 0 } } } </script>

これにより、より複雑なセットアップに手を伸ばすことなく、多くのアプリケーションのニーズを解決できます。次のように、条件文もネストできます。

<template>
  <main>
    <Component1 v-if="shouldShowComponent1" />
    <div v-else>
      <Component2 v-if="shouldShowComponent2" />
      <div v-else>
        <Component3 />
      </div>
    </div>
  </main>
</template>

を使用してcomponentコンポーネントとis

作成する代わりにv-ifそしてv-else構造体の場合、コンポーネントが動的に割り当てられるプレースホルダーが存在するようにテンプレートを作成できます。

それがcomponentコンポーネントは、の助けを借りて、しますv-bind:is指令。

<component v-bind:is="componentName"></component>

componentNameレンダリングするコンポーネントの名前を識別する状態のプロパティです。状態の一部、または計算されたプロパティにすることができます。

<script>
export default {
  data() {
    return {
      componentName: 'aComponent',
    }
  }
}
</script>

私の無料ダウンロードVueハンドブック


その他のvueチュートリアル: