野生大熊猫

使用vant在写子组件给父组件进行双向绑定无效
子组件这里发现如果用原生的input的话直接使用$event.target.value即可,但是如果使用vant的...
扫描右侧二维码阅读全文
26
2020/11

使用vant在写子组件给父组件进行双向绑定无效

子组件

这里发现如果用原生的input的话直接使用$event.target.value即可,但是如果使用vant的van-field的话就不行的,只能用$event才可以的

<div id="van-field-scan" v-cloak>
    <div>
        <van-field :value="value" :label="dlabel" @click-right-icon="scanQr()" clearable
        right-icon="scan" placeholder="点击右侧图标识别" @input="$emit('input', $event)"></van-field>
        <!-- <input @input="$emit('input', $event.target.value)"> -->
    </div>
</div>
<script>
    Vue.component('van-field-scan', {
        template: '#van-field-scan',
        props: {
            value:{
                type:String,
                default:"ok"
            },
            dlabel:{
                type:String,
                default:"测试"
            }
        },
        data(){
            return{
                value:"",
            }
        },
        watch:{
            value(newVal,oldVal){
                console.log(newVal,oldVal);
                console.log(this.$event);
            }
        },
        methods:{
            scanQr(e){
                console.log(e);
                wx.scanQRCode({
                    needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                    scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
                    success: (res) => {
                        this.value = res.resultStr
                        this.$emit('input',res.resultStr);
                    }
                });
            }
        }
    })
</script>

不相信的话可以直接使用@input="test($event)"来验证一下

Last modification:November 26th, 2020 at 01:17 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment