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 相关文章推荐
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
绑定回车enter事件代码
May 18 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
jquery插件格式实例分析
Jun 16 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
微信小程序云开发之云函数详解
May 16 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 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入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP+Mysql+jQuery文件下载次数统计实例讲解
2015/10/10 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
python 计算文件的md5值实例
2017/01/13 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
详解python做UI界面的方法
2019/02/27 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
行政经理岗位职责
2013/11/09 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
护理专业求职信
2014/06/15 职场文书
联片教研活动总结
2014/07/01 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python