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

181 阅读 0 评论 120 点赞

我是靠谱客的博主高兴黑裤，最近开发中收集的这篇文章主要介绍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:{//这里必须是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程序设计有所帮助。