（vue2.2.0以后的版本）Vue 子组件与父组件之间的 双向数据绑定

第一种：model作为属性的用法
类型：｛prop?:string,event?:string｝
参考官网API：model
父组件

<modelchild v-model="test"></modelchild>
父的值{{test}}
<button @click='fn'></button>
……
import modelchild from '@/component/modelchild'
export default{
    data(){
        return{
            test:0
        }
    },
    methods:{
        fn(){
            this. test+=1
        }
    }
}

子组件

<div>{{msg}}</div>
<button @click="fn2"></button>
export default{
  props:{
    msg:{default:0}
  },

  //使用model，这两个属性，prop属性说，我要将msg作为该组件被调用时，父组件model能取到的值，event 
  说，我要emit  cc的时候，参数值就是父组件model收到的值
  model:{
    prop:'msg',
    event:'cc'
  },
  methods:{
    fn2(){
      this. $emit('cc',this.msg+2)
    }
  }
}

第二种，父组件同上
子组件

<div>{{value}}</div>
<button @click="fn22"></button>
export default{
  props:{
    value:{default:0}
  },
  methods:{
    fn22(){
      this. $emit('input',this.value+2)
    }
  }
}

第三种
父组件

<modelchild3 v-model='searchtext'>
{{searchtext}}

子组件

<input type="text" :value="value" @input="$emit('input',$event.target.value)">

export default{
data(){

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