goodsshow和inputNumber子组件之间的参数传递

• 核心内容

子组件怎么向父组件传值
1.在子组件定义
emit(){
                this.$emit('sendcount',this.count);
            }
在增加和减少函数下面执行emit()，重新传递数值
2.在父组件接收
引入子组件import inputnumber from '../subcom/inputnumber.vue';
页面引入<inputnumber class="inputnumber" v-on:sendcount="getcount"></inputnumber>
data(){
            return {
                isshow:false, //小球默认是隐藏的
                goodsid:0,
                count:1, //接收inputNumber.vue组件传入的值
                swipeList:[],
                info:{}
            }
    // 定义方法获取inputNumber组件发送过来的count值
            getcount(count){
                this.count = count;
            },
3.如何把count给“加入购物车”拿到
<mt-button type="danger" @click="addShopCar">加入购物车</mt-button>
// 3.0 加入购物车方法
            addShopCar(){
                // 1.0 获取商品id和选择的数量
                var  goodsid = this.goodsid;
                var selectedCount = this.count;
                // 2.0 将数据包装成要求的格式{goodsid:goodsid,count:selectedCount} 存储到localStorage中
                setItem({goodsid:goodsid,count:selectedCount});
                // 3.0 讲当前数据的数量发送给所有的注册者
                vm.$emit(KEY,selectedCount);
                // 4.0 显示小球
                this.isshow =!this.isshow;
            }

• inputNumber

    <div class="tmpl">      
        <div class="left" @click="substrict">-</div>
        <div class="center">{{count}}</div>
        <div class="right"  @click="add">+</div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                count:1
            }
        },
        methods:{
            // 1.0 自减1
            substrict(){
                if(this.count>1){
                    this.count--;
                }else{
                    this.count = 1;
                }
                this.emit();
            },
            // 2.0 自增1
            add(){
                this.count ++;
                this.emit();
            },
            emit(){
                this.$emit('sendcount',this.count);
            }
        }
    }
</script>
<style scoped>
    .left,.center,.right{
        width: 30px;
        height: 30px;
        border:1px solid rgba(0,0,0,0.2);
        text-align: center;
        line-height: 30px;
    }
    .tmpl{
        width: 100px;
        display: flex;
    }
    .left{
        flex:0 30px;
    }
    .center{
        flex:0 40px;
    }
    .right{
        flex:1;
    }
</style>