vue 父组件调用子组件方法
父组件里
.vue文件
<component ref="transEvent" :is="childMsg.filter" >
</component>
js:部分
绑定ref属性:
this.$refs.transEvent.handleReset()
子组件里
js:部分
handleSave() {
console.log("成功调用")
},
子组件向父组件派发事件
子组件:
<transition name="fade">
<div @click.stop.prevent="addFirst" class="buy" v-show="!food.count || food.count===0">加入购物车</div>
</transition>
methods:{
addFirst(){
if(!event._constructed){
return;
}
this.$root.eventHub.$emit('cart.add', event.target);
Vue.set(this.food, 'count',1);
},
}
父组件:
created(){
// 子组件向父组件对象的派发 组件内调用事件接收, 在组件销毁时解除事件绑定,使用$off方法
this.$root.eventHub.$on('cart.add',(target) => {
this._drop(target)
});
},
重点在这个位置 是在 main.js 文件中:定义一个全局属性方法
data: {
eventHub: new Vue()
}
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
data: {
eventHub: new Vue()
}
})