1、創(chuàng)建VModelSelect組件,代碼如下:
<template>
????<select :value="value" @change="$emit('change', $event.target.value)">
????????<option value="項(xiàng)1">項(xiàng)1</option>
????????<option value="項(xiàng)2">項(xiàng)2</option>
????????<option value="項(xiàng)3">項(xiàng)3</option>
????</select>
</template>
<script>
????export default {
????????model: {
????????????prop: 'value',
????????????event: 'change'
????????},
????????props: {
????????????value: {
????????????????type: String,
????????????????default: ''
????????????}
????????}
????}
</script>
2、引用VModelSelect組件,代碼如下:
<template>
????<div>
????????當(dāng)前選擇項(xiàng):{{?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>