javascript - vue2.0 父组件怎么监听子组件的事件;

问题描述

问 题

1>我在父组件上使用$on监听 子组件上使用$emit自定义事件

父组件:$on('listenChild',(event)=>{ console.log(event.target)})

子组件: this.$emit('listenChild',event.target)

2>为什么我触发子组件事件时候,父组件上的监听事件没有触发?

父组件:
<template>
    <div class="goods">
        <div class="menu-wrapper" ref="menuWrapper">
            <ul>
                <li v-for="item,$index in goods" class="menu-item" :class="{'current':currentIndex===$index}" @click="selectMenu($index,$event)">
                    <!--  :class="{'current':currentIndex===$index}"
                    <span class="text">
                        <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>
                        {{item.name}}
                    </span>
                </li>
            </ul>
        </div>
        <div class="foods-wrapper" ref="foodsWrapper">
            <ul>
                <li v-for="item in goods" class="food-list food-list-hook">
                    <h1 class="title">{{item.name}}</h1>
                    <ul>
                        <li v-for="food in item.foods" class="food-item border-1px">
                            <div class="icon">
                                <img width="57" height="57" :src="food.icon" />
                            </div>
                            <div class="content">
                                <h2 class="name">{{food.name}}</h2>
                                <p class="desc">{{food.description}}</p>
                                <div class="extra">
                                    <span class="count">月售{{food.sellCount}}份</span>
                                    <span>好评率{{food.rating}}%</span>
                                </div>
                                <div class="price">
                                    <span class="now">¥{{food.price}}</span>
                                    <span class="old" v-show="food.oldPrice">¥{{food.oldPrice}}</span>
                                </div>
                            </div>
                            <div class="cartcontrol-wrapper">            
                                <cartcontrol :food="food"></cartcontrol>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

        <shopcart @listenChild="_drop" ref="shopcart" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>
    </div>
</template>

<script type="text/ecmascript-6">
    import BScroll from "better-scroll";
    import shopcart from "../shopcart/shopcart";
    import cartcontrol from "../cartcontrol/cartcontrol";
    const ERR_OK=0;
    export default {
        props:{
            seller:{
                type:Object,
            }
        },
        data:function(){
            return {
                goods:[],
                listHeight:[],
                scrollY:0,
            };
        },
        computed:{
            
        },
        methods:{
            _drop:function(el){
                console.log(el);
                console.log(event.target);
                this.$refs.shopcart.drop();
            }
        },
        components:{
            shopcart:shopcart,
            cartcontrol:cartcontrol,
        },

    
    };
</script>

<style lang="scss">
    
</style>

-------------------------------------------------------------------------------------
子组件:
<template>
    <div class="cartcontrol">
        <transition name="slide-fade">
            <div class="cart-decrease icon-remove_circle_outline" v-show="food.count>0" @click="decreaseCart">
            </div>
        </transition>
        <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
        <div class="cart-add icon-add_circle" @click="addCart">
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import Vue from 'vue';
    export default{
        props:{
            food:{
                type:Object
            }
        },
        methods:{
            addCart:function(event){
                this.$emit('listenChild',event.target);
                if(!event._constructed){
                    return;
                }
                if(!this.food.count){
                    Vue.set(this.food,'count',1);
                }else{
                    this.food.count++;
                }
            },
            decreaseCart:function(event){
                if(!event._constructed){
                    return;
                }
                if(this.food.count){
                    this.food.count--;
                }
            },

        }
    }
</script>

<style lang="scss">
    
    
</style>

解决方案

1、你在cartcontrol子组件触发一个事件，然后在父组件注册的shopcart子组件上监听是不行的，只能在cartcontrol子组件上监听：
<shopcart @listenChild = 'xxx'></shopcart> //错误
<cartcontrol @listenChild = 'xxx'></cartcontrol> //正确
2、如果你只是想在父组件中监听到子组件的事件，可以这样写：
// 子组件
this.$parent.$emit('listenChild')
// 父组件
this.$on('listenChild', function() {...})
3、如果你是想让兄弟组件中通信，可以看官方文档的非父子组件通信的例子（ps: 空实例一定要是两个兄弟组件都能获取到的，最好是通过import来分别引入）

这篇关于javascript - vue2.0 父组件怎么监听子组件的事件;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！