Vue v-model 父子组件实现数据双向传输，方法步骤

Vue v-model 父子组件实现数据双向传输，方法步骤

Vue 的v-model在文本组件中可以实现双向绑定，在父子组件中也能实现双向绑定
大概使用总结：

• 步骤1

在子组件中v-model=“父组件需要传递的值”，如下面代码，son是子组件

 <div id="myapp"  >
        <son v-model="num" ></son>  

• 步骤2
  -在子组件中接受一个固定值value，value不能改成其他因为这是一个v-model里面的属性值，在表单中v-model传入和传出值不是value，这个可以去Vue官网中观看，因为我文件中传入的是一个数值，所以类型是Number

props:{
                value:{
                    type:Number,
                    default:0
                }
            },

• 步骤3
  需要将子组件的数据传入父组件中，我们可以监听事件，使用$emit传递子组件的数据实现，这里input是不能更改，这个跟value是一样道理的，这个是vue官网提供的方法，而且在父组件中，值已经传入到父组件需要传的值不需要另外方法去接受,this.sonnum是赋值了value的值,这里已经实现了子传父

 this.$emit("input",this.sonsum)

• 步骤4

最后一步，就是父传子，我们只需要在子组件里面添加一个监听事件，只要传入数据变化我们子组件就跟着变法

watch:{
                value(newValue){
                    this.sonsum=newValue
                }

参考代码

<div id="myapp"  >
        <son v-model="num" ></son>  
        <button @click="change">chang1</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        Vue.component("son",{
            props:{
                value:{
                    type:Number,
                    default:0
                }
            },
            data:function(){
                return{
                    sonsum:''
                }
            },
            template:`
            <input type="text" v-model="sonsum" @input="sonc">
            `,
            methods:{
                sonc(){
                    this.$emit("input",this.sonsum)
                }
            },
            watch:{
                value(newValue){
                    this.sonsum=newValue
                }
            }
        })
         let a = new Vue({
            el:"#myapp",
            data:{
                num:2
            },
            methods:{
                change(){
                    this.num=666
                }
            },
            watch:{
                num(){
                    this.num=parseFloat(this.num)
                }
            }
        }) 
    </script>