vue中 vmodel父子组件的通信

有这样的需求，父组件绑定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' },

model: { prop: 'checked', event: 'change' },

另外还有个

1|0同步修饰符sync

<comp :foo.sync="bar"></comp> 它实际上就是 <comp :foo="bar" @update:foo="val => bar = val"></comp>

所以当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

this.$emit('update:foo', newValue)

 总结：这块其实我还没怎么弄明白，之后再整理吧