1、组件上使用v-model
官网解释：允许一个自定义组件在使用 v-model 时定制 prop 和 event。
默认情况下，一个组件上的 v-model 会把 value 用作 prop
且把 input 用作 event，
但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。
使用 model 选项可以回避这些情况产生的冲突。
简单来讲就是将组件实现数据双向绑定的效果，
需要注意的是自定义组件字眼表明其主要的使用场景是在组件内部，
2、组件上使用v-model
v-model其实是可以在组件上使用的，而且适用范围还是挺广的，尤其是在我们写组件的时候，相信很多人都有过在父组件展示一个子组件的行为，但是子组件里面有关闭整个组件的功能，，我们所做的就是在子组件当中通过$emit触发父组件对应的方法，改变父组件上v-if对应的变量控制显示隐藏。
但是有了v-model，这一切都变得很简单，最主要的是完全少了自定义对外暴露的关闭的方法，如果你关闭之后需要回调，那么通过监听你的是否显示的flag即可，所以大可放心使用。
3、父组件
<template>
<div id="app">
<HelloWorld v-model="showFlag" v-if="showFlag"></HelloWorld>
<button @click="showFlag=true">打开组件</button>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
data(){
return {
showFlag: false
}
},
components: {
HelloWorld
}
}
</script>
简单说明一下，这里我们引入了我们的子组件HelloWorld，
通过showFlag来控制组件的显示隐藏，
当然，组件上还用v-model绑定了showFlag，那么我们就来看看子组件是如何搞的吧。
4、子组件
<template>
<div class="hello">
<h1>这是组件里面的内容</h1>
<button @click="close">关闭组件</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: {
type: Boolean
}
},
methods: {
close(){
this.$emit('change', false)
}
}
}
对于子组件来说，允许自定义使用v-model时定制prop和event，
v-model中的prop就是把value用作prop，input用作event，
但是为了避免冲突，我们使用model的选项可以回避这些冲突，当然，你也得使用props声明checked这个prop。5、扩展一
vue2 中的v-model
v-model本质上是一个语法糖,如下代码
<input v-model="test">
<!--上面代码本质上就是下方代码-->
<input :value="test" @input="test = $event.target.value">因此，对于一个带有 v-model 的组件（核心用法），它应该如下：
带有v-model的父组件通过绑定的value值（即v-model的绑定值）传给子组件，子组件通过 prop接收一个 value;
子组件利用oninput事件实时通过 $emit 触发父组件input 事件，并传入新值value给父组件；
父组件
<template>
<div>
<child v-model="msg" @input="msg = $event.target.value" />
<!--<child :value="msg" @input="msg = $event.target.value" />-->
</div>
</template>
<script>
import child from './components/Child.vue'
export default {
components: {
child
},
data() {
return {
msg: ''
}
}
}
</script>子组件child
<template>
<input type="text" :value="modelValue" @input="handleInput">
</template>
<script>
export default {
name: 'Child',
props:['value'],
data() {
return {
modelValue: this.value
}
},
methods: {
handleInput(event) {
this.$emit('input', event)
}
}
}vue3中的 v-model
vue3中的v-model默认绑定的不是value，而是modelValue，接收的方法由input改为@update：modelValue。
父组件
<template>
<child v-model="msg" />
<p>{{msg}}</p>
</template>
<script lang="ts">
import { defineComponent,ref} from 'vue';
import child from './components/child/index.vue'
export default defineComponent({
name: 'App',
components:{
child
},
setup(){
const msg = ref('1')
return{
msg
}
}
});
</script>子组件child
<template>
<input type="text" :value="modelValue" @input="onInput">
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name:'ChildInput',
props:{
modelValue:{
type:String
}
},
setup(props, context){
const onInput = (e: Event) =>{
context.emit('update:modelValue',e.target.value)
}
return{
onInput
}
}
})
</script>6、扩展二
v-model和.async本质上都是实现双向绑定的语法糖,vue3子组件中自定义实现v-model的方法改为和.sync一致，因此去除.sync，直接用v-model代替。
1.自定义v-model在vue2.x中的实现
//父组件
<template>
<p>{{title}}</p>
<VmodelDome v-model="title"/>
</template>
//子组件
<template>
<div>
<button @click="$emit('changeTitle','aaa123')">点我</button>
</div>
</template>
<script>
export default {
model:{
prop:'title', //需要与props中的title相同
event:'changeTitle' //需要与$emit 中的事件名相同
},
props:{
title:{
type:String,
}
}
}
</script>2.sync在vue2.x中的应用
//父组件
<template>
<p>{{title}}</p>
<syncDemo :title.sync="title"> </syncDemo>
</template>
//子组件
<template>
<div>
<!--约定该事件名，必须为update:后加上需要更新的props即title-->
<button @click="$emit('update:title','aaa123')">点我</button>
</div>
</template>
<script>
export default {
props:{
title:{
type:String,
}
}
}
</script>3.v-model在vue3中的实现
//父组件
<template>
<!-- 自定义 v-model -->
<p>{{title}}</p>
<CustomVModel v-model="title"/>
</template>
//子组件
<template>
<div>
<button @click="$emit('update:title','aaa123')">点我</button>
</div>
</template>
<script>
export default {
props:{
title:{
type:String,
}
}
}
</script>