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

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

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

とにかく、Vueで行うのは非常に簡単です。 <component></component> 鬼ごっこ。

タグのご紹介

概念的には、 <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

13036