Vue=＞之自定义组件的v-model

1. vue官网的文档

2.定制 v-model

• 父组件

<template>
    <div>
        <p>vue 高级特性</p>
        <hr>

        <!-- 自定义 v-model -->
        <p>{{name}}</p>
        <CustomModel v-model="name"/>
        <!-- 等同于 -->
        <!-- <CustomModel :value="name"  @change1="name = $event"></CustomModel> -->
    </div>
</template>

<script>
import CustomModel from './CustomModel'
export default {
    data() {
        return {
            name:'小米'
        };
    },
    components:{
        CustomModel
    }

};
</script>

<style scoped lang="css">

</style>

• 子组件

<template>
    <!-- 例如：vue 颜色选择 -->
    <input type="text"
        :value="text1"
        @input="$emit('change1', $event.target.value)"
    >
    <!--
        1. 上面的 input 使用了 :value 而不是 v-model
        2. 上面的 change1 和 model.event1 要对应起来
        3. text1 属性对应起来
    -->
</template>

<script>
export default {
    model: {
        prop: 'text1', // 对应 props text1
        event: 'change1'
    },
    props: {
        text1: String,
        default() {
            return ''
        }
    }
}
</script>

上面的例子通过在子组件内部定义 model 选项来改变 v-model 绑定属性和响应的方法，

1. 当父组件点击 打开model 按钮的时候，内部的 name属性传递到了子组件，子组件用props接收
2. 子组件修改关键字, 触发了 change1 事件，并传递了一个参数给父组件
3. 父组件监听到了change1事件，并赋值name属性

这个过程在使用 $emit 和 v-on 时的逻辑，因为我们自定义了 model 属性， 这时就可以在使用 子组件的时候就可以使用 v-model 来简写这种写法啦。