Implementation method of two way binding and transferring value for Vue parent child component

Time:2021-6-30
V-mode can only be used for a single bi-directional binding value. Sync can support multiple bi-directional binding values. Of course, you can refer to your own usage scenarios to distinguish which one to use
An example of bidirectional data binding between father and son through. Sync

Subcomponents

<template>
    <view>
        < button class = PZ BTN "plain = true @ Click = dopic > take photos (≤ 5 photos, < 3M each) < / 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:"https://imgs.developpaper.com/imgs/AboutSlide_02.jpg",
                //Txt: "longitude: 42.6, dimension: 65.7"
                //     }
                // ]
            };
        },
        methods:{
            dopic:function(){
                //let self = this;
                let piclist = this.piclist;
                let self = this;
                uni.chooseImage({
                    Count: 1, // default 9
                    Sizetype: ['original '], // you can specify whether it is an original graph or a compressed graph. Both are available by default
                    Sourcetype: ['camera '], // select from album
                    success: function (res) {
                       console.log(res.tempFilePaths[0]);
                        var pic = res.tempFilePaths[0];
                        Var TXT = longitude and latitude not detected;
                        uni.getLocation({
                            type: 'wgs84',
                            success: function (res) {
                                Txt = "longitude" + res.longitude + "dimension" + 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>

Parent component

<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" > submit < / 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 can be bi-directional binding, but it still depends on the sub component $emit to trigger update:prop Name implementation modifies the variable value of the parent component to achieve two-way data flow. If the prop attribute is assigned directly, an error will still be reported.
In fact, the. Sync modifier is short for something
<template>
 <makpic :piclist.sync="formData.sjdw_pic"></makpic>
 <!--  Equivalent to -- >
 <makpic :piclist="formData.sjdw_pic" @updata:piclist="formData.sjdw_pic = $event"></makpic>
 <!--  The $event here is the parameter passed by the sub component $emit -- >
</template>

This work adoptsCC agreementReprint must indicate the author and the link of this article

Recommended Today

The selector returned by ngrx store createselector performs one-step debugging of fetching logic

Test source code: import { Component } from ‘@angular/core’; import { createSelector } from ‘@ngrx/store’; export interface State { counter1: number; counter2: number; } export const selectCounter1 = (state: State) => state.counter1; export const selectCounter2 = (state: State) => state.counter2; export const selectTotal = createSelector( selectCounter1, selectCounter2, (counter1, counter2) => counter1 + counter2 ); // […]