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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
javascript生成大小写字母
Jul 03 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 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
php使用百度翻译api示例分享
2014/01/31 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
Python导入oracle数据的方法
2015/07/10 Python
理解python中生成器用法
2017/12/20 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
PyQt5实现简易计算器
2020/05/30 Python
基于Python函数和变量名解析
2019/07/19 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
2014年五四青年节活动方案
2014/03/29 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS