Binding of v-model in Vue custom components

In the previous project, I found that there was a small problem with the component that I was cooperating with. The problem is that when the child component passes the value to the parent component, he has to define the event to receive it on the component label. This is not unworkable, but if we customize the component, we only need to modify the value passed by the parent component, or to return the parent component. The value that a parent component wants without doing anything else with this return value

• General Parent-Child Component Passing Value

//Parent component
<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:'Son Turtle is going home for dinner.'
                        }
                },
                methods:{
                        _getSonSendData(data){
                                this.sendData = data

                        }
                }
        }
</script>

<style scoped>

</style>

//Sub components
<template>
        <div class="son">
                <p>SON:I father Say to me{{data}}"</p>
                <button @click="_revert">Reply</button>
        </div>
</template>

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

<style scoped>

</style>

Generally speaking, value transfer is such that the parent component needs a way to receive the value from the child component. Generally speaking, it is good for the child component to use a small component (no component is needed to use a small component). But if the reuse rate of a component in a project is very high, then it is not necessary to use a method to receive every component used, so I consider that the child component is only to change the value of the parent component. For bi-directional data binding, using v-model to bind, is it not that the child component changes the value of the parent component without the need to define a method to directly change the value of the parent component, so I improved it.

//Parent component
<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:'Son Turtle is going home for dinner.'
                        }
                }
        }
</script>

<style scoped>

</style>

//Sub components
<template>
        <div class="son">
                <p>SON:I father Say to me{{data}}"</p>
                <button @click="_revert">Reply</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>

This way, you don't need to change the value in $data in the parent component by receiving the value from the child component in a way.
Notice in particular that the model in the child component needs to define two values, prop is the value of the parent component v-model binding, event can be understood as the binding event of the child component assigning the value of the v-model binding.