vue.js使用v-model实现父子组件间的双向通信示例

本文实例讲述了vue.js使用v-model实现父子组件间的双向通信。分享给大家供大家参考，具体如下：

<template><div>  这是主页面  <h1> {{num}}</h1>  <button @click="handleMins">-1</button>    <hr>    <!--      作者：786905664@qq.com      时间：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:{//这里必须是valuetype: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程序设计有所帮助。