Vue 自定义 v-model（高级）

模拟 v-model 类似 <input type="text" v-model="name"> 的应用，但对于 vuejs 中的 model 依然有点云里雾里，先记录下来，首先创建 CustomVModel.vue

<template>
    <!--常用的如：vue 颜色选择-->
    <input type="text"
           :value="str"
           @input="$emit('edit',$event.target.value)"
    >
    <!--
        1、上面的 input 使用了 :value 而不是 v-model
        2、上面的 edit 和 model.event 要对应起来
        3、str 属性对应起来
    -->
</template>
<script>
    export default {
        name: "CustomVModel",
        props: {
            str: String,
            default() {
                return ''
            }
        },
        model: {
            prop: 'str', // 对应 props str
            event: 'edit'
        }
    }
</script>

注意代码中的解释，在 Index.vue 中引入 CustomVModel.vue

<template>
    <div>
        <p>高级</p>
        <hr>
        <p>{{name}}</p>
        <!--自定义 v-model-->
        <!--类似 <input type="text" v-model="name">-->
        <CustomVModel v-model="name" />
    </div>
</template>
<script>
    import CustomVModel from './CustomVModel'
    export default {
        name: "index",
        components: {
            CustomVModel,
        },
        data() {
            return {
                name: '慕课'
            }
        }
    }
</script>