vue实现切换表单

Vue 实现表单切换的方法

在 Vue 中实现表单切换可以通过动态组件、条件渲染或路由等方式完成。以下是几种常见实现方法：

动态组件切换

利用 Vue 的 <component> 动态组件，通过 is 属性绑定当前显示的组件名：

<template>
  <div>
    <button @click="currentForm = 'LoginForm'">登录</button>
    <button @click="currentForm = 'RegisterForm'">注册</button>
    <component :is="currentForm"></component>
  </div>
</template>

<script>
import LoginForm from './LoginForm.vue';
import RegisterForm from './RegisterForm.vue';

export default {
  components: { LoginForm, RegisterForm },
  data() {
    return {
      currentForm: 'LoginForm'
    }
  }
}
</script>

条件渲染（v-if/v-show）

通过 v-if 或 v-show 控制表单显示隐藏：

<template>
  <div>
    <button @click="showLogin = true">登录</button>
    <button @click="showLogin = false">注册</button>

    <LoginForm v-if="showLogin" />
    <RegisterForm v-else />
  </div>
</template>

<script>
import LoginForm from './LoginForm.vue';
import RegisterForm from './RegisterForm.vue';

export default {
  components: { LoginForm, RegisterForm },
  data() {
    return {
      showLogin: true
    }
  }
}
</script>

路由切换

通过 Vue Router 实现不同表单页面的跳转：

// router.js
const routes = [
  { path: '/login', component: LoginForm },
  { path: '/register', component: RegisterForm }
]

表单状态管理

对于复杂场景，可使用 Vuex 或 Pinia 管理表单状态：

// store.js
export const useFormStore = defineStore('form', {
  state: () => ({
    activeForm: 'login'
  }),
  actions: {
    setActiveForm(formName) {
      this.activeForm = formName
    }
  }
})

注意事项

• 动态组件适合完全不同的表单结构
• v-if 会销毁组件，v-show 仅切换显示（适合频繁切换）
• 路由方式适合作为独立页面的表单
• 表单数据需在切换时妥善处理（可配合 keep-alive 缓存）