Vue2.2 组件 v-model 传值与更新

原理篇

<input type="text" v-model="model_value">
<!-- 等同于 -->
<input type="text" :value="model_value" @input="$emit('input', $event.target.value)">

默认 v-model 执行逻辑

注：2.2 版本起可自定义绑定 prop ，以及响应 event

export default {
    props: ["value"],
    model: {
        prop: "value",
        event: "input", // <input type="text" :value="model_value" @input="model_value = $event">
    }
}

应用篇

<!-- BaseComponent.vue -->
<template>
    <input type="text" v-model="model_value">
    <!-- 绑定自有变量 防止修改父组件传入数据 #单向数据流 -->
    <input type="text" :value="model_value" @input="handle_input">
</template>
<script>
export default {
    props: {
        value: String,
    },
    data() {
        return {
            model_value: this.value // 同步初始属性值
        }
    },
    watch: {
        value(val, oldVal) {
            this.model_value = val
            // 同步传入属性更新 # 父组件 => 子组件
        },
        model_value(val, oldVal) {
            this.$emit('input', val) // handle_input
            // 传出更新属性同步 # 子组件 => 父组件
        }
    }
}
</script>

<!-- FatherComponent.vue -->
<template>
    <base-component v-model="father_model_value"></base-component>
    <!-- 等同于 -->
    <base-component :value="father_model_value" @input="father_model_value = $event"></base-component>
</template>
<script>
import BaseComponent from "./components/BaseComponet"
export default {
    components: {
        BaseComponet
    },
    data() {
        return {
            father_model_value: "placeholder"
        }
    }
}
</script>