Vue自定义组件中v-model的绑定

子组件向父组件传值的时候他必须要我在组件标签上定义事件来接收，这样做不是不可行，但是如果是我们自定义的组件只是要做到对父组件传入的值进行修改，或者说为父组件返回一个父组件想要的值，而不对这个返回值做其他操作

一般父子组件传值

//父组件
<template>
        <div class="father">
                <p>DAD:{{sendData}}</p>
                <son :data="sendData" @revert="_getSonSendData"></son>
        </div>
</template>

<script>
import son from './son'
        export default {
                name: "testmodel",
                components:{son},
                data(){
                        return {
                                sendData:'龟儿子快回家吃饭'
                        }
                },
                methods:{
                        _getSonSendData(data){
                                this.sendData = data

                        }
                }
        }
</script>

<style scoped>

</style>

//子组件
<template>
        <div class="son">
                <p>SON:我father对我说“{{data}}”</p>
                <button @click="_revert">回复</button>
        </div>
</template>

<script>
        export default {
                name: "son",
                props:{
                        data:{
                                type:String
                        }
                },
                methods:{
                        _revert(){
                                this.$emit('revert','success')
                        }
                }
        }
</script>

<style scoped>

</style>

一般传值就是这样父组件中需要用一个方法来接收子组件传过来的值，一般组件运用小还好（运用小就不需要用组件了）但是如果一个项目中一个组件的复用率很大，那岂不是每运用一次组件就要用一个方法接收，所以我考虑到子组件只是为了改变父组件的某个值来进行双向数据绑定，利用v-model来绑定岂不是子组件改变了值父组件就不需要定义方法直接改变了父组件的值了吗

//父组件
<template>
        <div class="father">
                <p>DAD:{{sendData}}</p>
                <son v-model="sendData"></son>
        </div>
</template>

<script>
import son from './son'
        export default {
                name: "testmodel",
                components:{son},
                data(){
                        return {
                                sendData:'龟儿子快回家吃饭'
                        }
                }
        }
</script>

<style scoped>

</style>

//子组件
<template>
        <div class="son">
                <p>SON:我father对我说“{{data}}”</p>
                <button @click="_revert">回复</button>
        </div>
</template>

<script>
        export default {
                name: "son",
                props:{
                        data:{
                                type:String
                        }
                },
                model:{
                        prop:'data',
                        event:'revert'
                },
                methods:{
                        _revert(){
                                this.$emit('revert','success')
                        }
                }
        }
</script>

<style scoped>

</style>

这样子就做到了不需要再父组件中用方法接收子组件传过来的值来改变父组件中$data中的值
特别要注意的是子组件中的model需要定义两个值，prop是父组件v-model绑定的值，event你可以理解为子组件对v-model绑定值赋值的绑定事件

转自：https://segmentfault.com/a/1190000020439022

父组件绑定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'
  },

另外还有个

同步修饰符sync

<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
https://blog.csdn.net/weixin_30363817/article/details/96410096