Как реализовать переключение на другие компоненты в модальном окне?

Question

[frolova_elena]

я импортю компонет для того что бы реализовать переключение при клике

<checkPhone
      v-show="isModalVisible"
      @close="closeModal" />
<Forgotpass
      v-show="isModal_Pass"/>

  components: { Forgotpass, checkEmail},
    data() {
      return {
     
        // isModalVisible_pass:false,
        isModalVisible:false,
       
      }
    },
method:{
  showModal_Pass(){
        isModalVisible_Pass = true
      },
      showModal() {
        this.isModalVisible = true;

      },
      closeModal() {
        this.isModalVisible = false;

      },
}.

как это реализовать иначе

Answer 1

[Владимир Проскурин]

Есть такой свойство, is, указываете в него компонент и нет проблем.
<Component :is="currentComponent">
И в нужных методах меняете этот currentComponent на компонент, который нужно показать.
Вот примерчик набросал https://jsfiddle.net/set9x5fj/

<div id="app">
  <h2>Toster</h2>
  <Component :is="currentComponent"></Component>
  <input type="button" @click="showComp1" value="showComp1">
  <input type="button" @click="showComp2" value="showComp2">
</div>

Vue.component("comp1", {
	template: "<div>Hello from comp1</div>"
});
Vue.component("comp2", {
	template: "<div>Hello from comp2</div>"
});
new Vue({
  el: "#app",
  data: {
     currentComponent: "comp1"
  },
  methods: {
  	showComp1() {
    	this.currentComponent = "comp1";
    },
    showComp2() {
    	this.currentComponent = "comp2";
    }
  }
})