本文例項講述了vue.js使用v-model實現父子元件間的雙向通訊。分享給大家供大家參考，具體如下：

<template>
<div>
  這是主頁面
  <h1> {{num}}</h1>
  <button @click="handleMins">-1</button>
    <hr>
    <!--
      作者：[email protected]
      時間：2017-09-24
      描述：區域性元件
      -->
    <com v-model="num"></com>
  </div>
</template>

<script>
import son from './test1'
var com={
template:'<div>{{msg}}<button @click="handleAdd">+1</button>{{currentNum}}</div>',data(){
return{
msg:'我是區域性元件',currentNum:this.value
}
},props:{
value:{//這裡必須是value
type:Number
}
},methods:{
handleAdd(){
this.currentNum++;
this.$emit('input',this.currentNum)//這裡必須是input
}
},watch:{
value(val){
this.currentNum=val
}
}
}
export default {
components:{com},data(){
return{
msg:'',show:'',num:0
}
},methods:{
showson(e){
this.show=e
},handleMins(){
this.num--
}
}
}
</script>

希望本文所述對大家vue.js程式設計有所幫助。