有这样的需求，父组件绑定v-model，子组件输入更改父组件v-model绑定的数值。是怎么实现的呢？
实际上v-model 只是语法糖而已。
<input v-model="inputValue" /> <input v-bind:value="inputValue" v-on:input="inputValue= $event.target.value" />
实际上他们是一样的。
举个例子，父组件代码：
<template>
<div id="demo">
<test-model v-model="inputValue"></test-model>
<span>{{inputValue}}</span>
</div>
</template>
<script>
import testModel from ‘src/components/testModel‘
export default {
data(){
return{
inputValue: "inputValue"
}
},
components: {
testModel,
}
}
</script>
<style lang="scss" scoped>
</style>
子组件代码如下：
<template>
<span>
<input
ref="input"
:value="value"
@input="$emit(‘ababab‘, $event.target.value)"
>
</span>
</template>
<script>
export default {
data(){
return{
}
},
props: ["value"],
model: {
prop: ‘value‘,
//这个事件名可以随意写，它实际上是规定了子组件要更新父组件值需要注册的方法
event: ‘ababab‘
}
}
</script>
<style lang="scss" scoped>
</style>
以上，就实现了子组件修改父组件v-model绑定的值。
它的原理是
1.展示：父组件v-model，子组件接收一个props值value，将它展示到子组件自己的input上。
2.改变：当子组件自身发生改变时，触发自身的input方法，然后触发父组件的事件方法，改变父组件的value，进而改变接收的props，实现自身展示的改变
例子中使用了model,官网是这样说的，实际上是为了单选框,复选框按钮等情况的时候，他们的值并不是value，而是checked,这种情况下，就需要写这个。例如：
model: { prop: ‘checked‘, event: ‘change‘ },
另外还有个
<comp :foo.sync="bar"></comp>
它实际上就是
<comp :foo="bar" @update:foo="val => bar = val"></comp>
所以当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：
this.$emit(‘update:foo‘, newValue)
好了，就这么多，记录一下。
附上大神链接：https://www.haorooms.com/post/vue_vmodel
原文：https://www.cnblogs.com/wangxi01/p/11178243.html