我试图从子组件调用父方法,但它似乎无法工作..这里代码:
的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 = [''];
}
似乎&#34; pathlengthTozero&#34;没有调用emit是正确的使用方法吗?
答案 0 :(得分:7)
您需要将此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 = [''];
}
}
});
&#13;
<script src="https://unpkg.com/vue"></script>
<div id="app">
<div class="percorso" ></div>
<lista-percorso v-on:removeall="pathlengthTozero"></lista-percorso>
</div>
&#13;
答案 1 :(得分:0)
你应该把事件监听器放在使用它的子组件上
<div class="percorso">
<lista-percorso v-on:removeall="pathlengthTozero"></lista-percorso>
</div>