Vue2 + BootstrapVue 点击登录按钮后隐藏Login组件显示其他组件如何实现

实现方案 #

核心通过Vue2父子组件通信+v-if指令控制组件显隐即可完成需求，具体修改如下：

1. 修改App.vue #

在父组件维护登录状态，通过状态控制各组件显隐，同时监听登录组件的登录成功事件更新状态：

<template>
  <header/>
  <login @login-success="handleLoginSuccess" v-if="!isLogined"/>
  <component1 v-if="isLogined"/>
  <component2 v-if="isLogined"/> 
</template>

<script>
import header from './components/header.vue'
import component1 from './components/component1.vue'
import component2 from './components/component2.vue' 
import login from './components/login.vue'

export default {
  name: 'App',
  components: {
    header,
    component1,
    component2,
    login,
  },
  data() {
    return {
      // 登录状态，默认未登录
      isLogined: false
    }
  },
  methods: {
    handleLoginSuccess() {
      // 收到登录成功通知后修改状态
      this.isLogined = true
    }
  }
}
</script>

2. 修改login.vue #

给登录按钮绑定点击事件，触发后向父组件发送登录成功的通知：

<template>
  <div class="mt-5 col-md-12">
    <div class="mt-2">User ID</div>
    <b-form-input v-model="userId"></b-form-input>
  </div>
  <b-button class="mt-5 mb-5 btn-block" @click="handleLogin"> Login </b-button>
</template>

<script>
export default {
  data() {
    return {
      userId: ''
    }
  },
  methods: {
    handleLogin() {
      // 这里可以先加登录校验逻辑，校验通过后触发父组件事件
      this.$emit('login-success')
      // 如果需要传递用户信息给父组件，可以改成 this.$emit('login-success', this.userId)
    }
  }
}
</script>

如果需要刷新页面后仍然保持登录状态，可以把isLogined状态存在localStorage里，初始化的时候从本地存储读取即可。

内容的提问来源于stack exchange，提问作者user16365685