Vue公司2.0：父母不应对孩子活动

Question

我有一个侧边栏子组件与改变标签按钮：

<script type="text/x-template" id="employee-sidebar"> 
    <div class="sidebar full-height col-" data-color="purple"> 
     <div class="sidebar-wrapper" id="dash-board"> 
      <ul class="nav"> 
       <li v-bind:class="{ active: activeLink == 'dashboard' }"> 
        <a href="#dashboard" @click="changeTab('dashboard')"> 
         <i class="material-icons">dashboard</i> 
         <p>Dashboard</p> 
        </a> 
       </li> 
       <li v-bind:class="{ active: activeLink == 'team' }"> 
        <a href="#radio" @click="changeTab('team')"> 
         <i class="fa fa-users"></i> 
         <p>Team</p> 
        </a> 
       </li> 
       <li class="text-center"><button class="btn btn-primary clear-filter">Clear</button></li> 
      </ul> 
     </div> 
    </div> 
</script> 

当我打电话@click="changeTab('dashboard')"它调用子组件的功能，并发出changeTab事件：

Vue.component('employee-sidebar', { 
    template: '#employee-sidebar', 
    props: {}, 
    data: function() { 
    return { 
     activeLink: 'dashboard' 
    } 
    }, 
    methods: { 
    changeTab: function(tab) { 
     // Always see this console log 
     console.log(tab) 
     this.activeLink = tab 
     this.$emit('changeTab', tab) 
    } 
    } 
}) 

当我打电话我在听此事件的父组件：

<employee-sidebar v-on:changeTab="changeTheTab(activeLink)"></employee-sidebar> 

但changeTheTab()函数没有被调用父：

changeTheTab: function(tab) { 
    // Never see this console log 
    console.log(tab) 
    this.activeLink = tab 
} 

我在做什么错？

Answer 1

感谢@wostex为小写的小费，我可以更新我的组件以下几点：

Vue.component('employee-sidebar', { 
    template: '#employee-sidebar', 
    props: {}, 
    data: function() { 
    return { 
     activeLink: 'dashboard' 
    } 
    }, 
    methods: { 
    changeTab: function(tab) { 
     console.log(tab) 
     this.activeLink = tab 
     this.$emit('change_tab', tab) 
    } 
    } 
}) 

，并在父：

<employee-sidebar v-on:change_tab="(tab) => activeLink = tab"></employee-sidebar>