自定义组件使用v-model

最近项目需要封装一些组件，结合自己的开发风格，想让组件尽可能的高复用、低耦合、操作简单，就对自定义组件使用了v-model，在组件内部处理模块逻辑，与调用环境的状态数据实现双向绑定

以下就是我在自定义组件中使用v-model的一些关键知识

案例代码

<template>
    <div class="my-input-comp">
        <input type="text" v-model="text" @input="inputcb">
    </div>
</template>

<script>
/** 
 * @author ny
 * @component 自定义组件的v-model使用案例
*/
export default {
    data(){
        return{
            // 组件内部变量初始化为v-mode传入的数据 -----第四步
            text:this.val
        }
    },
    props: {
        // 定义一个prop变量接收数据 -----第一步
        val: String
    },
    model: {
        // 指定传入数据通过哪一个prop变量接收，此处我使用的val变量，默认为value -----第二步
        prop: 'val',
        // 指定更新绑定数据的事件，此处我定义了changeVal，默认为input事件 -----第三步
        event: 'changeVal'
    },
    methods:{
        /** 
         * @method 监听input值变化使用changeVal更新v-model绑定的数据 -----第五步
         * @param {Object} e 
        */
        inputcb(e){
            this.$emit('changeVal',e.target.value)
        },
    }
}
</script>

使用v-model需注意以下几点

1. 在props中添加一个自定义prop变量用作接收v-model传入的值；

2.在model中，通过prop属性指定prop变量接收v-model传入的数据，默认使用value接收；通过event属性指定更新v-model绑定数据的事件，默认使用input事件更新；

3.在data中定义一个变量用作组件使用，并用接收v-model数据的prop变量初始化；

4.在需要的场景中，使用model的event属性指定的事件发送一个新数据，用于更新v-model绑定的值；

ps:此处需要注意，不可在自定义组件中直接使用和修改用于接收v-model数据的prop变量，可能会报警告

最后附上vue官网api：

https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model