vue.jsでコンポーネントを書き換えてコンテンツを更新したい

Question

現在vue.jsの勉強中です。

importしたvueを後から別のvueで上書きし、コンテンツを変更したいのですが、
調べてもやり方が分からなかったのでお教え頂けたら幸いです。。。

↓Item_1.vueをItem_2.vueで上書きしたい

<template>
  <div class="home">
    <Item />
    <button @click="BtnClick()">ボタン</button>
  </div>
</template>

<script>
import Item from "@/components/item/Item_1.vue";

export default {
  name: "home",
  components: {
    Item
  },
  methods: {
    BtnClick: function() {
      // Item = "@/components/item/Item_2.vue"のコンポーネントで上書きしてコンテンツ内容を変更したい
    }
  }
};
</script>

Answer 1

動的なコンポーネント
にあるように、<component :is="">を使うことで動的にコンポーネントを変更可能です。

動的コンポーネント入れ替え例にとりあえずitem1→item2の一方向の切り替えだけ実装してみたのでitem2→item1やitem1⇔item2を実現したかったら、また考えてみてください。

Comments

[tama-]

すごくわかり易い例ありがとうございます！！！

大変助かりました！