如何通过vue的v-model实现双向绑定

双向数据绑定

其实就是 数据->视图 视图->数据 
		 父->子		子->父

我们通过代码来查看

	<div id="app">
        <!-- 通过v-bind单向绑定数据 -->
        <vc-div :mm="fat" @gg="box"></vc-div>
        <p> {{fat2}} </p>
        <hr>
        <vv-div></vv-div>
    </div>

		Vue.component("vv-div",{
            props:["mm"]
            data(){
                return{
                    sun:"子级数据"
                }
            },
            template:`  <div> 
                            {{mm}} 
                            <button @click="fnto">点我</button>
                        </div>`,
            methods: {
                fnto(){
                    this.$emit("gofa",this.sun)
                }
            },
        })
		let app = new Vue({
            el:"#app",
            data:{
                fat:"父级信息",
                fat2:"",
                rootfat:"父级二"
            },
            methods: {
                box(n){
                    this.fat2 = n;
                }
            },
        })

浏览器反馈

双向数据绑定修改
直接在组件调用的位置使用v-model绑定就可以了<vv-div v-model="rootfat"></vv-div>
然后用props去接收
这里我们会多一个属性model
里边有两个固定的属性

1. props——prop用来 v-model绑定的prop是哪个
2. event——告诉v-model触发什么事件的时候，自动去修改绑定的值

			props:["mm","rootfat"]
			model:{
                prop:'rootfat'
            },

现在就是一种双向数据绑定，父子之间相互影响，父级影响子级的话，直接修改值就可以了

现在看一下子传父如何实现
首先需要在子组件里有一个事件去触发

			template:`  <div> 
                            {{mm}} 
                            <button @click="fnto">点我</button>
                            <p> 我是子组件的{{rootfat}} </p>
                        </div>`,

响应成功后调用fnto这个函数让他去监听gofa，并把data里的sun作为参数传递过去

			methods: {
                fnto(){
                    this.$emit("gofa",this.sun)
                }
            },

model里的event是告诉v-model触发的什么事件的时候，自动去修改绑定的值。

		model:{
                // prop用来 v-model绑定的prop是哪个
                prop:'rootfat',
                // 告诉v-model触发什么事件的时候，自动去修改绑定的值
                event:'gofa'
            },

完整代码

Vue.component("vv-div",{
            props:["mm","rootfat"],
            // model选项 就是用来设定 绑定的属性和绑定的事件
            model:{
                // prop用来 v-model绑定的prop是哪个
                prop:'rootfat',
                // 告诉v-model触发什么事件的时候，自动去修改绑定的值
                event:'gofa'
            },
            data(){
                return{
                    sun:"子级数据"
                }
            },  
            template:`  <div> 
                            {{mm}} 
                            <button @click="fnto">点我</button>
                            <p> 我是子组件的{{rootfat}} </p>
                        </div>`,
            methods: {
                fnto(){
                    this.$emit("gofa",this.sun)
                }
            },
        })

浏览器反馈

点击按钮调用事件后

归纳后可以按照图片理解