封装组件使用v-model 注意事项

vmodel双向绑定需要注意的是，我们在组件里的操作不能直接修改props，而官方给出的例子又非常简单。

简单例子不能解决复杂场景

例如下面简单的例子：

<template>
    <div class="dateGroup">
        <input
            :value="value"
            type="text"
            @change=" e => {$emit('change', e.target.value);}"
        />
        <button>
            如果我在这里点击按钮，让input的值变成“世界真美好”就会很困难！！
        </button>
    </div>
</template>

<script>
export default {
    name: "MyInput",
    model: {
        props: "value",
        event: "change"
    },
    props: {
        value: {
            type: String,
            default: ""
        }
    }
};
</script>

如果这个组件里，我需要封装一部分交互逻辑，并修改值value，我该怎么做呢？我是不能直接修改value的，vue官网的例子是把这些简化了的，我们需要还原正常的组件封装流程。

正常组件封装流程

1、外层传递vmodel绑定的值，需要内层data里定义一个对应的对象来接收，并做交互操作所绑定的值。
2、相当于currentValue是value的一面镜子，作为子组件和父组件通信的第三方协调者。
（1）协调父组件到子组件的数据过程。
（2）协调交互到界面的数据过程+交互到父组件的过程

<template>
    <div class="dateGroup">
        <input
            v-model="currentValue"
            type="text"
            @change="$emit('change', currentValue)"
        />
        <button @click="currentValue = '世界真美好'">
            交互修改值为“世界真美好”
        </button>
    </div>
</template>

<script>
export default {
    name: "MyInput",
    model: {
        props: "value",
        event: "change"
    },
    props: {
        value: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            currentValue: ""
        };
    },
    watch: {
        value: {
            handler(val) {
                // 监听props的value变化，修改组件内 currentValue字段，
                // 这个字段是可修改的，可以做复杂交互改变值
                this.currentValue = val;
            },
            immediate: true
        }
    }
};
</script>