本文实例讲述了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程序设计有所帮助。
最新文章
热门文章
猜你喜欢
