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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
JavaScript中的集合及效率
Jan 08 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
js通过八个点 拖动改变div大小的实现方法
Mar 05 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
vue相关配置文件详解及多环境配置详细步骤
May 19 Javascript
全网小程序接口请求封装实例代码
Nov 06 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
js简单的弹出框有关闭按钮
2014/05/05 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
微信小程序解除10个请求并发限制
2018/12/18 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
Python全局变量操作详解
2015/04/14 Python
python中while循环语句用法简单实例
2015/05/07 Python
Python中Class类用法实例分析
2015/11/12 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
本科生职业生涯规划书范文
2014/01/21 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
退伍老兵事迹材料
2014/01/31 职场文书
教师教学评估方案
2014/05/09 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL