Vue.jsのスワップ可能な動的コンポーネント

Vue.jsの同じマウントポイントでさまざまな任意のコンポーネントを切り替える必要があったことがありますか？確かに、これはそれほど一般的な問題ではありませんが、独自のルーターや、スロットを使用したくないコンテナコンポーネントを実装した場合に、やらなければならないことです。私はAngular2アプリでこのユースケースに一度遭遇しましたが、実際には解決しませんでした（その直後にこのアプリをVueに移植したため）。

とにかく、<component></component>タグを使用してVueで行うのは非常に簡単です。

タグのご紹介

概念的には、<component>タグは非常にシンプルです。文字列（またはコンポーネント定義）:ispropを使用するだけです。次に、Vueはその文字列によって参照されるコンポーネントを検索し、<component>タグの代わりにレンダリングします。ただし、単純さに惑わされないでください。ロックを解除するユースケースの数は驚くべきものです。

使用例：

<template>
  <component :is="dynamicComponent"></component>
</template>

<script>

// Register another component to render in this one dynamically.
import Vue from 'vue';

Vue.component('some-other-component', {
  template: `<p>Wheee</p>`
});

export default {
  data() {
    return {
      dynamicComponent: `some-other-component`
    }
  }
}
</script>

または、コンポーネント定義だけを使用して物事を単純化します。

<template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: {
        template: `<p>Wheee</p>`
      }
    }
  }
}

</script>

または、計算されたプロパティを使用してコンポーネントをリアクティブに切り替えます…

<template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  props: {
    value: Boolean
  },

  computed: {
    dynamicComponent() {
      if(value) {
        return 'component-special';
      } else {
        return 'component-default';
      }
    }
  }
}
</script>

そしてもちろん、Vueインスタンスからアクセス可能な小道具やその他のもので渡されたコンポーネントをレンダリングすることができます。

生き続ける

現在、<component>でレンダリングされたコンポーネントは、別のコンポーネントがその場所にレンダリングされると完全に破棄され、再度追加されると再作成されます。これは必ずしも理想的ではないため、<keep-alive>コンポーネントが導入されました。

<component>タグでレンダリングされた（または条件付きでレンダリングされた）コンポーネントが、レンダリングされなくなったときに破棄されないようにする場合は、<component>タグを<keep-alive>次のようなタグ：

<template>
  <div>
    <keep-alive>
      <component :is="dynamicComponent"></component>
    </keep-alive>
  </div>
</template>