Vue.jsでcomponentを使用したtemplateの切り替え方法

Question

前提・実現したいこと

Vue.jsを始めたばかりです。
Vue.jsでコンポーネントでのテンプレートの切り替えを動的にしたいと考えています。
初期表示では親コンポーネントには子コンポーネント1が表示されており、ボタンを押す事で子コンポーネント2を表示したいと思っていますが、これはどのように行えば実装できますか？
子コンポーネント1でボタンを押下し、alertの関数までは出来ており、propsを使う事で解決しような気はするのですが、そこからどのようにしていいかわからないので質問させて頂きました。

該当のソースコード

Vue.js

・parent.vue(基となる親コンポーネント)
<template>
  <component :is="componentView"></component>
</template>

<script>
import component1 from '@/components/component1';
export default {
  components: {
    component1
  },
  data() {
    return { 
      componentView: 'component1' 
    }
  }
};
</script>

・component1.vue(初期表示で表示されている子コンポーネント1)
<template>
  <h1>コンポーネント1</h1>
  <button v-on:click="changeView()">test</button>
</template>

<script>
import component2 from '@/components/component2';

export default {
  components: {
    component2
  },
  methods: {
   changeView: function() {
     alert('click');
   }
  }
};
</script>

・component2.vue(子コンポーネント1のbuttonを押下したchangeViewメソッドでこのコンポーネント2に切り替えをしたい)
<template>
  <h1>コンポーネント2</h1>
</template>

試したこと

子コンポーネント1に props:を使ってみたが上手くいかなかった

Answer 1

1

propsのデータの流れは単方向なのです。
参考

codepen

2

propsのデータの流れは複雑すぎるの際、vuexを使うの方がいいと思います。

Comments

[esp_horizon]

ご返信ありがとうございます。
component1のmethod内でthis.$emit('update:componentName', 'component2')でcomponent2の画面に更新していると思うのですが、これを他のファイルで行う場合にはどうすればいいでしょうか？
というのも単一ファイルコンポーネントで別々のファイルになってまして、基のapp.vueにcomponentsというフォルダ配下にあるcomponent1からcomponent2を渡したいと思っています。
ですので、this.$emit('update:componentName', 'component2')だと渡せていない状態になります。
試しにconsole.logでcomponent2を出力したらオブジェクトが表示されておりましたので、後は渡すだけと思っております。

頂いた回答を元にしてこのようになっております。
また:component-name.syncとはどのように使うのでしょうか？

・App.vue
<template>
<div id="app">
<div>
<component :is="componentName" :component-name.sync="componentName"/>
</div>
</div>
</template>

<script>
import component1 from '@/components/component1';
export default {
components: {
component1
},
data() {
return {
componentView: 'component1'
}
}
};
</script>

・components/component1.vue
<template>
<h1>コンポーネント1</h1>
<button v-on:click="changeView()">test</button>
</template>

<script>
import component2 from '@/components/component2';

export default {
props: ['componentName'],
components: {
component2
},
methods: {
changeView() {
this.$emit('update:componentName', 'component2')
console.log(component2);
}
}
};
</script>

・components/component2.vue
<template>
<h1>コンポーネント2</h1>
</template>

Answer 2

下記の実装でいけるかと思います。
お試しください。

<template>
  <component :is='componentView' />
  <button @click='changeView'>change</button>
</template>

<script>
  import component1 from '@/components/component1';
  import component2 from '@/components/component2';

  export default {
    components: {
      component1,
      component2,
    },
    data: () => ({
      componentView: component1,
    }),
    methods: {
      changeView () {
        this.componentView = component2
      }
    }
  }
</script>