Javascript Vue.js$emit不'；t从子组件传递单击事件

我试图在子组件中的按钮上添加单击事件，然后隐藏我在父组件中导入的侧栏组件。我读了很多文章，看了一些视频，但我现在无法解决这个问题

Child-Navbar.vue

<template>
  <div id="header">
    <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
      <div class="toggle-btn ml-3">
        <button type="button" class="close" @click="closeSidebar" aria-label="Close">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
      <div class="nav-head mx-auto">
        <a class="navbar-brand" href="#">Contact Book</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
      <div class="collapse navbar-collapse col-lg-10 mx-auto" id="navbarSupportedContent">
        <form class="form-inline col-md-12 my-2 my-lg-0 justify-content-center">
          <input class="form-control shadow-none col-md-6 mr-sm-2" type="search" placeholder="Search"
            aria-label="Search">
          <button class="btn btn-outline-secondary shadow-none my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>

    </nav>
  </div>
</template>

<script>
  import sidebar from './Sidebar.vue'
  import contactList from './ContactList.vue'

  export default {
    data() {
      return {

      }
    },
    methods: {
      closeSidebar() {
        this.$emit('slideLeft');
          document.querySelector('.close').classList.toggle('rotate');
      },
    },
    components: {
      sidebar,
      contactList
    }
  }
</script>

搜寻
从“./sidebar.vue”导入侧栏
从“./contactList.vue”导入联系人列表
导出默认值{
数据（）{
返回{
}
},
方法：{
closeSidebar（）{
此.$emit（'slideLeft'）；
document.querySelector（'.close'）.classList.toggle（'rotate'）；
},
},
组成部分：{
侧边栏，
联系人名单
}
}

父-App.vue

<template>
  <div id="app">
    <navbar></navbar>
    <div class="d-flex">
      <transition name="ease">
        <sidebar class="slide" v-show="clickToggle" @slideLeft="toggleSidebar"></sidebar>
      </transition>
      <contact-list></contact-list>
    </div>
    <modal></modal>
  </div>
</template>

<script>
  import sidebar from './components/Sidebar.vue'
  import navbar from './components/Navbar.vue'
  import contactList from './components/ContactList.vue'
  import modal from './components/AddContactModal.vue'

  export default {
    name: 'app',
    data() {
      return {
        clickToggle: true
      }
    },
    methods: {
       toggleSidebar() {
          this.clickToggle = !this.clickToggle;
       }
    },
    components: {
      sidebar,
      navbar,
      contactList,
      modal
    }
  }
</script>

从“./components/sidebar.vue”导入侧栏
从“./components/navbar.vue”导入导航栏
从“./components/contactList.vue”导入联系人列表
从“./components/AddContactModal.vue”导入模态
导出默认值{
名称：“应用程序”，
数据（）{
返回{
clickToggle:true
}
},
方法：{
toggleSidebar（）{
this.clickToggle=！this.clickToggle；
}
},
组成部分：{
侧边栏，
导航栏，
联系人名单，
情态动词
}
}

这是另一个子组件——Sidebar.vue，我正试图通过父组件隐藏它

<template>
  <div id="sidebar">
    <div class="d-flex" id="wrapper">
      <!-- Sidebar -->
      <div class="bg-light border-right" id="sidebar-wrapper">
        <div class="list-group list-group-flush">
          <a href="#" class="list-group-item list-group-item-action bg-light">
            <i class="fa fa-id-card"></i><span class="item-desc">All Contacts</span></a>
          <a href="#" class="list-group-item list-group-item-action bg-light" data-toggle="modal" data-target="#exampleModalScrollable">
            <i class="fa fa-user-plus"></i><span class="item-desc">Add Contact</span></a>
          <a href="#" class="list-group-item list-group-item-action bg-light">
            <i class="fa fa-users"></i><span class="item-desc">Groups</span></a>
          <a href="#" class="list-group-item list-group-item-action bg-light">
            <i class="fa fa-share-alt"></i><span class="item-desc">Share Contacts</span></a>
          <a href="#" class="list-group-item list-group-item-action bg-light">
            <i class="fa fa-trash"></i><span class="item-desc">Trash</span></a>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import contactList from './ContactList.vue'
import modal from './AddContactModal.vue'

  export default {
    methods: {
    },
    components: {
      contactList, modal
    }
  }
</script>

<style lang="">
  #sidebar {
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
  }

  .hide {
    margin-left: -16rem !important;
  }

  #wrapper {
    overflow-x: hidden;
  }
  
  #sidebar-wrapper {
    min-height: calc(100vh - 57px);
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
  }

  #sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
  }

  #sidebar-wrapper .sidebar-heading i {
    transform: rotate(90deg);
  }

  #sidebar-wrapper .list-group {
    width: 16rem;
  }

  #sidebar-wrapper .list-group .list-group-item {
    padding: 20px 30px;
  }

  #sidebar-wrapper .list-group .list-group-item i {
    width: 40px;
    padding: 0 10px;
  }

  #page-content-wrapper {
    min-width: 100vw;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
  }

  @media (min-width: 768px) {
    #sidebar-wrapper {
      margin-left: 0;
    }

    #page-content-wrapper {
      min-width: 0;
      width: 100%;
    }

    #wrapper.toggled #sidebar-wrapper {
      margin-left: -15rem;
    }
  }
</style>

从“./contactList.vue”导入联系人列表
从“./AddContactModal.vue”导入模态
导出默认值{
方法：{
},
组成部分：{
通讯录
}
}
#边栏{
-webkit过渡：边距.25s放松；
-moz过渡：边距0.25秒放松；
-o型过渡：边缘。25秒放松；
过渡：边缘。25秒放松；
}
.隐藏{
左边距：-16rem！重要；
}
#包装纸{
溢出x：隐藏；
}
#边栏包装{
最小高度：计算（100vh-57px）；
-webkit过渡：边距.25s放松；
-moz过渡：边距0.25秒放松；
-o型过渡：边缘。25秒放松；
过渡：边缘。25秒放松；
}
#边栏包装。边栏标题{
填充：0.875雷姆1.25雷姆；
字号：1.2rem；
}
#边栏包装。边栏标题i{
变换：旋转（90度）；
}
#侧栏包装器。列表组{
宽度：16雷姆；
}
#边栏包装器。列表组。列表组项{
填充：20px 30px；
}
#侧栏包装器.列表组.列表组项目i{
宽度：40px；
填充：0 10px；
}
#页面内容包装器{
最小宽度：100vw；
}
#wrapper.toggled#侧栏包装器{
左边距：0；
}
@介质（最小宽度：768px）{
#边栏包装{
左边距：0；
}
#页面内容包装器{
最小宽度：0；
宽度：100%；
}
#wrapper.toggled#侧栏包装器{
左边距：-15雷姆；
}
}

您正在发出一个

slideLeft

事件（您可能应该将其重命名为

slide left

），但您并没有在任何地方听到它，请尝试提出一个更容易理解和恢复的问题，我的朋友。例如，注释代码是理解问题所必需的？@jogarcia有一个观点-尝试删除代码中与问题无关的部分-您可以删除样式，只留下不起作用的部分-这样可以节省其他人的时间，他们也会更愿意提供帮助。另外，您的文件

App.vue

和

Navbar.vue

看起来几乎一样-唯一的区别是注释掉的代码…@jogarcia抱歉，我是堆栈溢出新手，而且时间已经很晚了，所以我已经找不到解决方案和编码了。@Phil我犯了一个错误，在App.vue中复制了Navbar代码。我现在修复了它，我看到我在App.vue中为

slideLeft

设置了监听器。您正在发出一个

slideLeft

事件（您可能应该将其重命名为

slide left

），但您没有在任何地方收听它，请尝试产生一个更容易理解的问题，我的朋友。例如，注释代码是理解问题所必需的？@jogarcia有一个观点-尝试删除代码中与问题无关的部分-您可以删除样式，只留下不起作用的部分-这样可以节省其他人的时间，他们也会更愿意提供帮助。另外，您的文件

App.vue

和

Navbar.vue

看起来几乎一样-唯一的区别是注释掉的代码…@jogarcia抱歉，我是堆栈溢出新手，而且时间已经很晚了，所以我已经找不到解决方案和编码了。@Phil我犯了一个错误，在App.vue中复制了Navbar代码。我现在修复了它，我看到我在App.vue中为

slideLeft