自定义组件的v-model

参考
在写自定义组件时,有时候在子组件中改变值后需要同步修改到父组件中,此时使用v-model就很方便了
注意点
使用v-model传递给子组件的prop默认名称为value,事件默认为input,如果想要修改这两个默认值,可以使用model来重新指定,如上面的例子中,指定v-model传递给子组件的名称为msg,事件为change
父组件

<template>
    <div>
        {{ parentMsg }}
        <modelTest v-model.sync="parentMsg"></modelTest>
    </div>
</template>

<script>
import modelTest from './modelTest.vue'
export default {
    components: {
        modelTest
    },

    data() {
        return {
            parentMsg: ""
        }
    }
}
</script>

子组件

<template>
    <div>
        v-model
        <el-select v-model="msgStr" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
    </div>
</template>

<script>
export default {
    props: {
        msg: String
    },
    model: {
        prop: 'msg',
        event: 'input'
    },
    computed: {
        msgStr: {
            get() {
                return this.msg
            },
            set(val) {
                this.$emit("input", val);
            },
        }
    },
    data() {
        return {
            options: [
                { value: '黄金糕1', label: '黄金糕'},
                { value: '双皮奶2', label: '双皮奶'},
                { value: '蚵仔煎3', label: '蚵仔煎'},
                { value: '龙须面4', label: '龙须面'},
                { value: '北京烤鸭5', label: '北京烤鸭'},
            ],
        }
    },
}
</script>