单击按钮后隐藏组件（登录）并显示其他组件

Question

我正在使用 BootstrapVue (VueJS 2)。

当我打开我的 PWA 时，我想看到我的 header（应该一直在那里）和我的 login.vue - 组件 component1 和 component2 应该被隐藏.

点击 login.vue 中的登录按钮后，我想隐藏 login.vue 并显示其他两个组件。

但我不知道如何解决这个问题..先谢谢你！

<template>
  <header/>
  <login/>
  <component1/>
  <component2/> 
</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,
  }
}

</script>

<template>
  <div class="mt-5 col-md-12">
    <div class="mt-2">User ID</div>
    <b-form-input></b-form-input>
  </div>

  <b-button class="mt-5 mb-5 btn-block"> Login </b-button>
</template>

Answer 1

首先你需要给登录按钮添加点击事件来判断用户是否被点击。通过事件，我们可以向父元素发出值

<b-button class="mt-5 mb-5 btn-block" @click="$emit('loginButtonClicked')"> Login </b-button>

之后你需要像下面这样修改父组件；

<template>
  <header/>
  <login v-if="!hideLogin" @loginButtonClicked="hideLogin=true"/>
  <component1/>
  <component2/> 
</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 {
      hideLogin: false
    }
  }
}

</script>

这里我们监听了parent中的事件，修改了其中的数据，通过v-if

显示组件

Answer 2

如果您使用的是vuex，请在状态中创建一个属性并在按钮调用的方法中更改其值。否则，您可以在单击按钮时使用触发器和发出事件，并在父组件中侦听它，并更改数据属性的值。取决于这个数据值（或者你的 state 属性，如果你有 vuex），你可以在你的组件中使用 v-if 来选择你想要显示的组件。

单击按钮后隐藏组件（登录）并显示其他组件

Hide component (Login) after clicking button and show other components

javascript

vue.js

vuejs2

vue-component

bootstrap-vue