Как заменить компонент Vue динамически?

Question

[burtellbee]

Всем привет! Изучаю Vuejs.
Такой вопрос: как заменить форму входа на форму регистрации при клике из формы.

Т.е. есть страница с формой входа она вставляется как компонент, если на этой странице определить обе формы (импортировать), то подставлять их в<component :is="".... не составляет труда.
А как можно такое проделать из самого компонента формы, - поменять компонент на странице действием из компонента.

Не совсем понимаю как передавать параметры между компонентами и страницами

Comments

[WapSter]

Если я правильно тебя понял в чём я очень сомневаюсь, то тебе нужен emit

Answer 1

[Farkl]

в формы прокидывать пропс с булевой переменной и менять ее через emit, в зависимости от этой переменной рисовать компонент

Comments

[burtellbee]

Помоги) почему форма не меняется?
Через emit приходит название формы, но она не отрисовывается

<template>
    <component :is="forms[activeComponent]" @formName = 'changeForm' />
    <router-link to="/">Go to Home</router-link>
</template>

<script setup>
import LoginForm from '../components/forms/auth/LoginForm.vue'
import RegisterForm from '../components/forms/auth/RegisterForm.vue'
import { ref, watch } from 'vue'

const forms = {
    LoginForm,
    RegisterForm
}
let activeComponent = ref('LoginForm')
const changeForm = (val) => {
    //console.log(val)
    activeComponent = val
    //console.log(activeComponent)
}

watch(activeComponent, (activeComponentNew) => {
    console.log(activeComponentNew)
})

</script>

[burtellbee]

Разобрался) watch не нужен был.
activeComponent = val
заменил на
activeComponent.value = val

[Farkl]

burtellbee, еще можно так https://codesandbox.io/s/gracious-leftpad-8196vu?f...