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」不叫上發出這就是使用它的正確方法？

來源

2017-07-28 Pds Ink

您可以使用V-上聽到DOM事件。 v-on：removeall沒有任何意義。 –

你在哪裏使用這個'lista-percorso'組件？ –

你需要把這個v-on:removeall="pathlengthTozero"到組件<lista-percorso>像下面，

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

來源

2017-07-28 10:59:09

你應該把事件偵聽器放在孩子conponent它是用來

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

來源

2017-07-28 11:02:09

vue2調用使用$父功能從組件

回答

相關問題