Vue vue 父组件调用子组件方法 子组件向父组件派发事件

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()
        }
      })