vue2 使用来自组件的 $emit 调用父函数
vue2 call a parent function using $emit from component
我正在尝试从子组件调用父方法,但它似乎不起作用..这里的代码:
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 上调用,这是正确的使用方法吗?
您需要将此 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>
您应该将事件侦听器放在使用它的子组件上
<div class="percorso">
<lista-percorso v-on:removeall="pathlengthTozero"></lista-percorso>
</div>
我正在尝试从子组件调用父方法,但它似乎不起作用..这里的代码:
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 上调用,这是正确的使用方法吗?
您需要将此 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>
您应该将事件侦听器放在使用它的子组件上
<div class="percorso">
<lista-percorso v-on:removeall="pathlengthTozero"></lista-percorso>
</div>