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

小编给大家分享一下vue.js如何使用v-model实现父子组件间的双向通信，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

js的作用是什么

1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies，包括创建和修改等。7、基于Node.js技术进行服务器端编程。

具体如下：

<template>
<div>
  这是主页面
  <h2> {{num}}</h2>
  <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如何使用v-model实现父子组件间的双向通信”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！