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

Posted 2023-02-16

【中文标题】单击按钮后隐藏组件（登录）并显示其他组件

【英文标题】：Hide component (Login) after clicking button and show other components

【发布时间】：2021-11-22 03:17:52

【问题描述】：

我正在使用 BootstrapVue (VueJS 2)。

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

在我的 login.vue 中单击我的 LOGIN 按钮后，我想隐藏我的 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>

【参考方案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>

这里我们监听了父级中的事件并修改了其中的数据以通过v-if显示组件

【讨论】：

在我的组件周围添加了<div v-if="hideLogin" @loginButtonClicked="hideLogin"></div>，现在它运行良好！谢谢！

【参考方案2】：

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