Vue 2.0: Eltern reagiert nicht auf das Kind Ereignis

Question

ich eine Sidebar geordnete Komponente mit Schaltflächen, die die Registerkarte ändern:

<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> 

Als ich @click="changeTab('dashboard')" nennen es ruft eine Funktion in der untergeordneten Komponente und gibt ein changeTab Ereignis:

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) 
    } 
    } 
}) 

Als ich rufen Sie die Komponente in der übergeordneten ich für diese Veranstaltung zu hören:

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

Aber die changeTheTab() Funktion wird nie in der Stamm genannt:

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

Was mache ich falsch?

Answer 1

Danke für die Kleinspitze @wostex, konnte ich meine Komponente auf die folgenden aktualisieren:

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) 
    } 
    } 
}) 

und in der Mutter:

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