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>