ここ..コード私は子コンポーネントから親メソッドを呼び出すようにしようとしているが、それは動作していないと思われるコンポーネント

Question

から発する$を使用して、親関数を呼び出すvue2：

index.htmlを

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

を

成分

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

親方法

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

それを使用するための正しい方法である「pathlengthTozeroが」EMITで呼び出されていないようですか？

Answer 1

あなたは以下のようなコンポーネント <lista-percorso>にこの v-on:removeall="pathlengthTozero"を配置する必要があり

、

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

とthis.$emit親メソッドを発射することが可能になります。

サンプルデモ：

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

あなたはあなたが聞くために、Vオンを使用することができ、それが

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