highlight: a11y-dark
theme: scrolls-light
简单介绍，Vue里面的v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。
v-model封装弹窗
父组件
```js点我弹窗
export default {
components: {
manageDialog
},
data(){
return{
isVisible:false
}
}
}
>子组件
```js
<el-dialog
:visible.sync="isVisible"
:before-close="handleClose"
>
<script>
export default {
model: {
prop: 'isVisible',
event: 'close'//这个要是close
},
props: {
isVisible: {
type: Boolean,
default: false
},
},
methods: {
handleClose() {
this.$emit('close', false)
}
}
}
</script>
小结：
这个比较简单，需要注意的是子组件里的
model允许一个自定义组件在使用v-model时定制prop和event。官方文档里有写，一个组件上的v-model默认会利用名为value的prop和名为input的事件，但是像单选框、复选框等类型的输入控件可能会将value特性用于不同的目的。model选项可以用来避免这样的冲突，所以上面的子组件里，我们用balabala来替换掉了原本的input事件，所以在$emit的时候，里面的事件名应为close，否则默认为input.
其实还有第二种方法，是需要使用.sync修饰符。子组件通过this.$emit("update:show",false);来操作的。这里就不过多介绍。
v-model封装可编辑表单
先看官网介绍=>
自定义事件可以用于开发支持 v-model 的自定义表单组件。回忆一下 v-model 在原生元素上的用法：
<input v-model="searchText" />
上面的代码其实等价于下面这段 (编译器会对 v-model 进行展开)：
<input
:value="searchText"
@input="searchText = $event.target.value"
/>
父组件
```js
> 子组件
```js
<template>
<div class="box">
<span>{
{ value }}</span>
<button @click="testVModel">测试v-model</button>
</div>
</template>
<script>
export default {
name: 'HomeChild',
props: {
value: {
type: String,
default: ''
}
},
methods: {
testVModel () {
this.$emit('input', '我是子组件')
}
}
}
</script>
用 model 选项的 组件使用 v-model
父组件
<template>
<div class="home">
<h3>输入的实时内容：{
{ myValue }}</h3>
<custom-model v-model="myValue"></custom-model>
</div>
</template>
<script>
import CustomModel from './CustomModel'
export default {
name: 'Home',
components: {
CustomModel,
},
data () {
return {
myValue: ''
}
},
}
</script>
复制代码
子组件
<template>
<!-- 自定义组件中使用v-mode指令 -->
<input type="search" @input="changeInput" data-myValue="">
</template>
<script>
export default {
name: 'CustomModel',
// 当我们使用model的默认值的时候value作prop，input作event时，可以省略不写model。
model: {
prop: 'myValue', // 默认是value
event: 'myInput', // 默认是input
},
props: {
// 接收string和number类型的值，
// 注意不能是写成字符串["String","Number"],因为此时它们是构造器，是全局变量
myValue: [String, Number],
},
methods: {
changeInput ($event) {
// 向上派发myInput事件，这样model监听myInput才有意义：当输入字符时触发input事件，
// 进而派发触发自定义的myInput事件，然后model监听myInput，就实现了数据绑定
this.$emit('myInput', $event.target.value)
},
}
}
</script>
