基础用法
v-model是vue的一个基础指令，用于表单的双向数据绑定
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
v-model原理
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件
<input v-model="searchText" />
<!-- 等价于 -->
<input
:value="searchText"
@input="searchText = $event.target.value"
/>
组件封装
接下来介绍如何使用v-model封装组件
index.vue
<my-select v-model="mySelectVal"></my-select>
<!-- 等价于 -->
<my-select :value="mySelectVal" @input="mySelectVal= $event.target.value"></my-select>
<script>
import MySelect from './components/MySelect.vue'
export default {
name: '',
components: {
MySelect
},
data() {
return {
mySelectVal: ''
}
}
}
</script>
封装一个mySearch组件，使用v-model绑定mySelectVal
MySelect.vue
<template>
<div class="wrapper">
<el-select v-model="currentValue" 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 {
name: '',
props: {
value: {
type: String,
default: ''
}
},
data() {
return {
currentValue: '',
options: [
{
value: '1',
label: '黄金糕'
},
{
value: '2',
label: '双皮奶'
}
]
}
},
watch: {
value: {
handler(val) {
console.log('父组件的value值 ---> ' + val)
this.currentValue = val
},
immediate: true,
deep: true
},
currentValue(val) {
this.$emit('input', val)
}
}
}
</script>
1、子组件通过value接收父组件传过来的mySelectVal，通过watch将值赋给当前组件的currentValue；
2、当select选择时，子组件currentValue值发生改变后会触发this.$emit('input', val)，此时触发父组件的@input，mySelectVal值会得到更新；
3、父组件通过v-model绑定一个属性，在子组件选择后，父组件可以直接拿到子组件选择的结果，实现了my-select组件的简单封装。