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

投稿日: 2022-04-20 2022-04-20
タグ: Vue.js

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

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

タグのご紹介

概念的には、<component>タグは非常にシンプルです。文字列（またはコンポーネント定義）:isプロップが必要です。次に、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>

getdocs

8682