vue.js从topbar组件切换侧栏组件

Question

我刚刚开始学习vue js，我试图弄清楚如何从顶栏组件切换侧边栏组件。这是我的代码

侧边栏被定义为拍卖区域的子组件，所有这些都在Main.vue中调用。当我点击topnav栏中的菜单按钮时，我需要切换拍卖区内的侧边栏。

sidebar.vue

<template>
  <div class="sidebar">
      &nbsp;
  </div>
</template>

<script>
export default {
  name: 'sidebar',
}
</script>
<style scoped>
div{
  padding: 0;
}
.row{
  margin-left: 0;
  margin-right: 0;
}
.sidebar{
    top:121px;
    z-index: 1000;
    height: 80vh;
    left: 0;
    background: rgb(47, 153, 79);
    width: 220px;
    display: inline-block;
    padding: 0 !important;
    /* transform: translateX(220px);
    transition: width 2s ease-in-out; */
}
</style>

Topbar.vue

<template>
  <div class="col-md-12 col-sm-12 col-xs-12 topbar">
    <div class="row topbar-1">
      <div class="col-md-2 col-sm-2 col-xs-2 logo-container">
        <img src="../assets/images/logo.png" alt="logo"/>
      </div>
    </div>
    <div class="row topnav">
      <div class="col-md-3 col-sm-3 col-xs-3 sidebar-toggle">
        <button>
          <i class="fa fa-bars"></i><b style="margin-left:10px;">Live 
          Auctions</b>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Topbar',
}
</script>
<style scoped>
div{
  padding: 0;
}
.row{
  margin-left: 0;
  margin-right: 0;
}
button{
  background: transparent;
  border:none;
  color:white;
  font-size: 19px;
  margin:11px 0;
}
.topbar{
  height: 120px;
  top:0;
  left:0;
  right: 0;
  position: absolute;
  border: 1px solid black;
}
.topbar-1{
  height: 70px;
}
.topnav{
  height: 50px;
  background: #1eb84c;
  color:white;
}
.logo-container img{
  width:100%;
  height: auto;
}
.sidebar-toggle{
  margin-left: 15px;
}
</style>

Auctionzone.vue

<template>
  <div class="col-md-12 col-sm-12 col-xs-12 auctionZone">
      <sidebar></sidebar>
  </div>
</template>

<script>
import sidebar from './sidebar.vue'
export default {
  name: 'auctionZone',
  components:{ sidebar }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
div{
  padding: 0;
}
.row{
  margin-left: 0;
  margin-right: 0;
}
.auctionZone{
    background: #eeeded;
    height: 80vh;
    width: 100%;
    top:121px;
}
</style>

Main.vue

<template>
  <div id="app">
    <Topbar></Topbar>
    <auctionZone>
      <sidebar></sidebar>
    </auctionZone>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from './components/footer.vue'
import Topbar from './components/Topbar.vue'
import auctionZone from './components/auctionZone.vue'
import sidebar from './components/sidebar.vue'
export default {
  name: 'Main',
  components: { Footer,Topbar,auctionZone,sidebar }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>