Vue2 组件双向绑定数据

前言

vue中由于父子组件数据流的限制，父组件只能赋值给子组件，子组件只能以事件的方式通知给父组件，但是在开发中我们经常希望父组件中的某个（或多个）变量可以即时被子组件改变，实现子组件的"v-modal"功能。下面给出一种实现方法。

直接看代码

父组件

<mail-address-colorui-2>
    :receiver_name="receiver_name" @update:receiver_name="val => receiver_name=val"
    :receiver_mobile="receiver_mobile" @update:receiver_mobile="val => receiver_mobile=val"
    :receiver_post_code="receiver_post_code" @update:receiver_post_code="val => receiver_post_code=val"
</mail-address-colorui-2>

子组件

<view class="cu-form-group ">
    <view class="title">收件人</view>
    <input name="input" class="text-right" style="color: darkgray;" disabled="true" v-model="m_receiver_name" ></input>
</view>
<view class="cu-form-group">
    <view class="title">手机号码</view>
    <input name="input" class="text-right" type="number" :disabled="can_edit" v-model="m_receiver_mobile"></input>
</view>
<view class="cu-form-group">
    <view class="title">邮政编码</view>
    <input name="input" class="text-right" type="number"   :disabled="can_edit" v-model="m_receiver_post_code"></input>
</view>

思路就是在子组件中创建一个缓存变量，把父组件的值赋值给子组件，再在子组件中监听父组件中值的变化，并且实时更新，并通过emit消息更新到父组件中。

props: {
    receiver_name: {
            type: String,
            default: ''
    },
    receiver_post_code: {
            type: String,
            default: ''
    },

    receiver_mobile: {
            type: String,
            default: ''
    },
},
components: {
    'auto-parse-address': autoAddressParse,
},
data() {
    return {
            m_receiver_name: this.receiver_name,
            m_receiver_post_code: this.receiver_post_code,
            m_receiver_mobile: this.receiver_mobile,
    }
},
watch: {
    receiver_name(val) {
            this.m_receiver_name = val;
    },
    receiver_post_code(val) {
            this.m_receiver_post_code = val;
    },
    receiver_mobile(val) {
            this.m_receiver_mobile = val;
    },
    m_receiver_name(val) {
            this.$emit('update:receiver_name', val);
    },
    m_receiver_post_code(val) {
            this.$emit('update:receiver_post_code', val);
    },
    m_receiver_mobile(val) {
            this.$emit('update:receiver_mobile', val);
    },
}

总结

vue中是有自己的事件循环的，虽然也可以直接在子组件中修改父组件的值，但会收到warning，因此还是遵循vue的事件流设计，从而构造符合自己需要的组件才是最好的