asprain
asprain
  • 发布:2022-01-28 02:13
  • 更新:2022-01-28 02:32
  • 阅读:1205

双向绑定组件在微信小程序中不起作用。

分类:uni-app

我写了一些双向绑定组件,比如说这个选项卡组件<tabs>,内容略过,调用方法是:

<tabs tabs="全部|到店专用|外卖专用" v-model="mode"></tabs>

但是我发现在H5确实产生了双向绑定的效果,可是在微信小程序中,无论我怎么搞,数据始终是单向的,只能从父组件流向子组件,不能从子组件流向父组件。v-model始终不起任何作用。

这是怎么回事呢?

2022-01-28 02:13 负责人:无 分享
已邀请:
asprain

asprain (作者) - 挣扎中的中年码农

我还制作了一个<number-spinner >,外观类似下面这样:

但是当我用<number-spinner v-model="number"></number-spinner>调用它的时候,发现v-model完全不起任何作用啊。

而且我记得昨天前天这还是正常的。今天突然不正常了。
该组件的源码是:

// compoments/number-spinner/number-spinner.vue  
<template>  
    <view class="number-spinner">  
        <text>{{val}}</text>  
        <navigator @tap="plus" url=""><text class="icon-top"></text></navigator>  
        <navigator @tap="minus" url=""><text class="icon-bottom"></text></navigator>  
    </view>  
</template>  

<script>  
    export default {  
        name:"number-spinner",  
data() {  
            let val = parseInt(this.value, 10);  
            if (isNaN(val)) val = 1;  
            return {  
                val: val  
            };  
        },  
        emits:['change'],  
        model:{  
            prop:'value',  
            event:'change'  
        },  
        props: {  
            value: {  
                type: [Number, String],  
                default: 1  
            },  
            name: {  
                type: String  
            },  
            min: {  
                type: Number,  
                default: 0  
            },  
            max: {  
                type: Number,  
                default: 99  
            },  
            step: {  
                type: Number,  
                default: 1  
            }  
        },watch:{  
            value:function(val){  
                val = parseInt(val, 10);  
                if (isNaN(val)) val = 1;  
                this.val=val;  
            },  
            max:function(max){  
                if(this.val>max){  
                    this.val=max;  
                    this.$emit('change', this.val);  
                }  
            },  
            min:function(min){  
                if(this.val<min){  
                    this.val=min;  
                    this.$emit('change', this.val);  
                }  
            }  
        },  
        methods: {  
            minus(e) {  
                if(this.val==this.min)return;  
                this.val = this.val - this.step;  
                if (this.val < this.min) this.val = this.min;  
                this.$emit('change', this.val);  
            },  
            plus(e) {  
                if(this.val==this.max)return;  
                this.val = this.val + this.step;  
                if (this.val > this.max) this.val = this.max;  
                this.$emit('change', this.val);  
            }  
        }  
    }  
</script>  

<style>  
.number-spinner{  
    display:inline-grid;  
    grid-template-columns:1fr 42rpx;  
    grid-template-rows:32rpx 32rpx;  
    border:1px solid #ccc;  
    box-sizing:content-box;  
    min-width:114rpx;height:64rpx;  
    margin-right:12rpx;  
}  
.number-spinner>text:first-child{  
    background-color:#ffffff;  
    box-sizing:border-box;  
    grid-area:1/1/3/2;  
    text-align:center;  
    line-height:64rpx;  
}  
.number-spinner>navigator:nth-child(2){  
    font-size:24rpx;  
    grid-area:1/2/2/3;  
    text-align:center;  
    background-color:#f1f2f3;  
}  
.number-spinner>navigator:nth-child(3){  
    font-size:24rpx;  
    grid-area:2/2/3/3;  
    text-align:center;  
    background-color:#f1f2f3;  
}  
</style>  
asprain

asprain (作者) - 挣扎中的中年码农

在H5中是正常的,但是在微信开发者工具中就不正常了。我试了一下,不但是双向绑定失效了,甚至连单向绑定都不起作用了。就是v-model既不能传入数据也不能传出数据了。只能用:value="" @change="" 这种办法了。

该问题目前已经被锁定, 无法添加新回复