Vue自定义组件v-model实现双向数据绑定-Select下拉框

1、创建VModelSelect组件，代码如下：

<template>
    <select :value="value" @change="$emit('change', $event.target.value)">
        <option value="项1">项1</option>
        <option value="项2">项2</option>
        <option value="项3">项3</option>
    </select>
</template>

<script>
    export default {
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            value: {
                type: String,
                default: ''
            }
        }
    }
</script>

2、引用VModelSelect组件，代码如下：

<template>
    <div>
        当前选择项：{{ mocelSelectValue }}
        <v-model-select v-model="mocelSelectValue"></v-model-select>
    </div>
</template>

<script>
    import VModelSelect from '@/components/VModelSelect'
    export default {
        components: {
            VModelSelect
        },
        data () {
            return {
                mocelSelectValue: ''
            }
        }
    }
</script>