<input type="text" v-model="inputValue" />
以上等效于：
<input
type="text"
v-bind:value="inputValue"
v-on:input="inputValue=$event.target.value"
/>
使用v-model实际上是传递一个自定义属性value和自定义事件input给子组件，子组件接收value值，同时通过input事件传递参数给父组件；
自定义组件中使用了v-model，默认自定义属性名是value，自定义事件名是input，下面看看子组件是如何接收和传递参数给父组件的：
<template>
<div>
<input type="text" v-model="value" @change="inputChange"/>
</div>
</template>
<script>
export default {
props: {
value: {
// 父组件传递过来的value
type: String,
default: () => {
return ''
}
}
},
methods: {
inputChange(val) {
this.$emit('input', val) // 通过调用父组件的input事件来传递值
}
}
}
</script>
如果想要改变默认的自定义属性名和自定义事件名就要使用model属性了：
model: {
prop: 'selectValue', // 自定义属性名
event: 'myEvent' // 自定义事件名
},
所以prop接收的时候就变成了以下这样：
props: {
selectValue: {
type: String,
default: () => {
return ''
}
}
},
// 调用事件的时候传递参数
this.$emit('myEvent', val)
下面是做的一个小案例：
父组件：
<template>
<div class="container">
<div style="margin-bottom: 10px">
<el-button type="primary" @click="setValue">模拟接口赋值</el-button>
<el-button type="primary" @click="getValue">看看拿到的值</el-button>
</div>
<Myselect v-model="selectValue" />
</div>
</template>
<script>
import Myselect from '@/components/Myselect.vue'
export default {
components: {
Myselect
},
data() {
return {
selectValue: ''
}
},
methods: {
setValue() {
setTimeout(() => {
this.selectValue = '选项4'
}, 100);
},
getValue() {
alert('v-model的值为：' + this.selectValue)
}
}
}
</script>
子组件：
<template>
<div>
<el-select
v-model="mySelectValue"
placeholder="请选择"
@change="selectChange"
>
<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 {
model: {
prop: 'selectValue',
event: 'myEvent'
},
props: {
selectValue: {
type: String,
default: () => {
return ''
}
}
},
computed: {
mySelectValue: {
get() {
return this.selectValue
},
set(v) {
}
}
},
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
},
methods: {
selectChange(val) {
this.$emit('myEvent', val)
}
}
}
</script>
下面说下computed的使用方式：
- 第一种：函数形式
computed: {
mySelectValue() {
return this.selectValue
}
}
以上的形式用在案例中是会报错的，因为mySelectValue是用在v-model上的，也就是会修改mySelectValue的值，函数形式的写法是只读而不能修改的，否则会报错；
- 第二种：对象形式
mySelectValue: {
get() {
return this.selectValue
},
set(v) {
}
}
对象形式定义的属性，允许修改，不会报错；