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


Posted in Javascript onFebruary 05, 2020

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
JavaScript事件委托实例分析
May 26 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
vue cli 全面解析
Feb 28 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
vue使用原生swiper代码实例
Feb 05 #Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 #Javascript
JS原型和原型链原理与用法实例详解
Feb 05 #Javascript
js实现视图和数据双向绑定的方法分析
Feb 05 #Javascript
小程序如何写动态标签的实现方法
Feb 05 #Javascript
vue如何实现动态加载脚本
Feb 05 #Javascript
vue实现图片懒加载的方法分析
Feb 05 #Javascript
You might like
在线增减.htpasswd内的用户
2006/10/09 PHP
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
angularjs学习笔记之完整的项目结构
2015/09/26 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
一个简单的python程序实例(通讯录)
2013/11/29 Python
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
django如何实现视图重定向
2019/07/24 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
全球性的众包图形设计市场:DesignCrowd
2021/02/02 全球购物
JSF的标签库有哪些
2012/04/27 面试题
行政助理求职自荐信
2013/10/26 职场文书
采购内勤岗位职责
2013/12/10 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
公司捐款倡议书
2014/05/14 职场文书
2014年健康教育工作总结
2014/11/20 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
Ruby处理CSV数据方法详解
2022/04/18 Ruby
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android