vue2 appeler une fonction parent à l'aide émettre $ du composant

Question

je suis en train d'appeler un parent méthodes de composant enfant, mais il ne semble pas travailler .. ici le code:

index.html

<div class="percorso"v-on:removeall="pathlengthTozero()"> 
</div> 

composant

Vue.component('lista-percorso', { 
template:` 
<div class="col-lg-2 col-xs-2"> 
    <div class="removeall pull-right" v-on:click="removeall()"></div> 
</div>`, 

    methods:{ 
    removeall : function(){ 
     this.listaSelezionati = []; 
     this.$emit('removeall'); 
    } 
} 

méthode parent

pathlengthTozero : function(){ 
     il_tuo_percorso = ['']; 
    } 

semble que « pathlengthTozero » n'est pas appelé émette qui est la bonne façon de l'utiliser?

Answer 1

Vous devez mettre ce v-on:removeall="pathlengthTozero" au composant <lista-percorso> comme ci-dessous,

<lista-percorso v-on:removeall="pathlengthTozero"></lista-percorso> 

et this.$emit sera en mesure de tirer la méthode mère.

Demo Sample:

Vue.component('lista-percorso', { 
 
template:` 
 
<div class="col-lg-2 col-xs-2"> 
 
    <div class="removeall pull-right" v-on:click="removeall()">xxxxxxxxxx</div> 
 
</div>`, 
 

 
    methods:{ 
 
    removeall : function(){ 
 
     this.listaSelezionati = []; 
 
     this.$emit('removeall'); 
 
    } 
 
    } 
 
}) 
 

 

 

 
var App = new Vue({ 
 
    el: '#app', 
 
    methods:{ 
 
    pathlengthTozero : function(){ 
 
     alert('hello'); 
 
     il_tuo_percorso = ['']; 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue"></script> 
 

 
<div id="app"> 
 
    <div class="percorso" ></div> 
 

 
    <lista-percorso v-on:removeall="pathlengthTozero"></lista-percorso> 
 
</div>

Answer 2

vous devez mettre l'écouteur d'événement sur le conponent de l'enfant où il est utilisé

<div class="percorso"> 
    <lista-percorso v-on:removeall="pathlengthTozero"></lista-percorso> 
</div>