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

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绑定值赋值的绑定事件