Vue父子组件双向绑定传值的实现方法

Vue
387
0
0
2022-04-17
标签   Vue基础
v-mode只能进行单个双向绑定值而使用.sync可支持多个双向绑定值,当然,具体使用哪个可以参照自己的使用场景来区分
通过.sync 实现父子数据双向绑定的例子

子组件

<template> 
    <view> 
        <button class="pz-btn" plain="true" @click="dopic">拍照(≤5张,每张<3M)</button> 
        <view class="uni-flex uni-column" v-for="(item, index) in piclist"> 
            <view class="uni-flex uni-column"> 
                <image  :src="item.pic" style="width: 100%;height:150upx"> 
                <text>{{ item.txt }}</text> 
            </view>

        </view> 
    </view>
</template>

<script> 
    export default {
        name:"makpic",
        props:{
            piclist:{
                require: true,
                type:Array,
                default () {
                    return []
                }
            }
        },
        data() {
            return {
                // piclist:[  
                //     {  
                //         pic:"http://www.vckin.cn/images/AboutSlide_02.jpeg",  
                //         txt:"经度:42.6 维度:65.7"  
                //     }  
                // ]
            };
        },
        methods:{
            dopic:function(){
                //let self = this;  
                let piclist = this.piclist;
                let self = this;
                uni.chooseImage({
                    count: 1, //默认9  
                    sizeType: ['original'], //可以指定是原图还是压缩图,默认二者都有  
                    sourceType: ['camera'], //从相册选择  
                    success: function (res) {
                       console.log(res.tempFilePaths[0]);
                        var pic = res.tempFilePaths[0];
                        var txt = "未检测到经纬度";
                        uni.getLocation({
                            type: 'wgs84',
                            success: function (res) {
                                txt = "经度:"+ res.longitude + " 维度:"+res.latitude;
                                piclist.push({
                                    pic:pic,
                                    txt:txt
                                });
                                self.$emit("update:piclist",piclist);
                            },
                            fail:function(){
                                piclist.push({
                                    pic:pic,
                                    txt:txt
                                });
                                self.$emit("update:piclist",piclist);
                            }
                        });

                    }
                });
            },
        }
    }
</script>

父组件

<template> 
    <view class="body-con"> 
        <uni-forms label-width="100" :value="formData"> 
            <uni-group > 
                <uni-forms-item  required label="aaaa"> 
                    <uni-easyinput type="text" v-model="formData.sjdw" /> 
                    <makpic :piclist.sync="formData.sjdw_pic"></makpic> 
                </uni-forms-item> 
                <uni-forms-item  required label="bbbb"> 
                    <uni-easyinput type="text" /> 
                    <makpic :piclist.sync="formData.sjjz_pic"></makpic> 
                </uni-forms-item>
                </uni-group >
            <button @click="subform">提交</button> 
        </uni-forms>

    </view>
</template>

<script> 
    export default {
        data() {
            return {
                formData:{
                    "sjdw_pic":[],
                    "sjjz_pic":[],
                    "sjjz_adress_pic":[],
                }
            };
        },
        methods:{
            subform(){
                console.log(this.formData);
            }
        }
    }
</script>
.sync 即可双向绑定,但是还是要依靠子组件 $emit 去触发 update:prop名 实现修改父组件的变量值实现双向数据流,如果直接对prop的属性直接赋值,依然会出现报错。
事实上, .sync 修饰符是一个简写,它做了一件事情
<template> 
 <makpic :piclist.sync="formData.sjdw_pic"></makpic> 
 <!-- 等价于 --> 
 <makpic :piclist="formData.sjdw_pic" @updata:piclist="formData.sjdw_pic = $event"></makpic> 
 <!-- 这里的$event就是子组件$emit传递的参数 -->
</template>