Vue中模块开发如何对（父子组件相互传值）两个独立组件进行双向数据绑定，

如何让组件支持v-model指令
前置知识：

父组件如何给子组件传值

父组件：

<template>
    <my-child :value="title"><my-child>
</template>
<script>
export default{
    
    
    name:'my-parent',
    data(){
    
    
        return{
    
    
            title:'父组件数据'
        }
    }
}
</script>

子组件

<tempalte>
    <div :value="title"></div>
</tempalte>
<script>
export default{
    
    
    name:'my-child',
    props:['value']
}
</script>

---

.

子组件给父组件传值

父组件

<template>
    <my-child :value="title" @input="fn"><my-child>
</template>
<script>
export default{
    
    
    name:'my-parent',
    data(){
    
    
        return{
    
    
            title:'父组件数据'
        }
    }，
    methods(){
    
    
        fn(data){
    
    
            //data就是子组件传递过来的数据
        }
    }
}
</script>

定义子组件

<tempalte>
    <div :value="title"></div>
    <div @click="$emit('input','子组件传递数据')">给父组件传递数据</div>
</tempalte>
<script>
export default{
    
    
    name:'my-child',
    props:['value']
}
</script>

v-model（双向数据绑定）是一个语法糖-某些代码的简写

赋值给表单元素或者组件    简写方法：value来进行赋值
接受值（表单元素改变的值，组件内部改变的值）@input来接收值-接受组	件内部变化的数据
结论：v-model默认是“：value=“值”+@input=“值”的简写

如何让自己的组件支持双向数据绑定

<my-child v-model='msg'></my-child>
///相当于
<my-child :value="msg" @input="msg=$event"></my-child>

通过：value实现父传子
通过$emit（’input‘,‘数据值’）实现子传父