vue中子组件向父组件传递数据的实例代码(实现加减功能)


Posted in Javascript onApril 20, 2018

这里讲解一下子组件向父组件传递值的常用方式。 这里通过一个加减法的实例向大家说明一下,这个的原理。

如下图所示:

当没有任何操作的时候父组件的值是 0

vue中子组件向父组件传递数据的实例代码(实现加减功能)

当点击加号以后父组件的值是 1

vue中子组件向父组件传递数据的实例代码(实现加减功能)

当点击减号以后父组件的值是减一变成 0

vue中子组件向父组件传递数据的实例代码(实现加减功能)

具体代码我直接贴出来,刚出炉的代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>子组件将数据传递给父组件</title>
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
//定义一个组件
Vue.component('counter', {
 template: '\
    <div style="background:#eee;width: 238px;">\
        <div>这里是子组件里面的内容!</div>\
        <div style="margin-top:20px"></div>\
        <div>\
          <span style="margin-right:20px;display:inline-block;">加法运算</span><button @click="incrementCounter">+</button>\
        </div>\
        <div>\
          <span style="margin-right:20px;margin-top:20px;display:inline-block;">减法运算</span><button @click="deleteCounter">-</button>\
        </div>\
    </div>\
  ',
 data: function () {
  return {
   counter: 0
  }
 },
 methods: {
  incrementCounter: function () {
   this.counter += 1;
   this.$emit('increment',1);
  },
  deleteCounter: function () {
   this.counter -= 1;
   this.$emit('increment',2);
  }
 }
})
//执行一个组件
window.onload = function(){
  var app = new Vue({
    el: '#app',
    data: {
      total: 0
    },
    methods:{
      incrementTotal: function (val) {
        if(val==1){
          this.total += 1;
        }else{
          if(this.total<=0){
            this.total = 0;
          }else{
            this.total -= 1;
          }
        }
      }
    }
  })
}
</script>
<body>
  <div id="app" style="background:red;width: 238px;">
    <p>这里是父组件里面的内容!</p>    
    <p>子组件传递的值:<b>{{ total }}</b></p>
    <counter v-on:increment="incrementTotal"></counter>
  </div>
</body>
</html>

总结

以上所述是小编给大家介绍的vue中子组件向父组件传递数据的实例代码(实现加减功能) ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js中substring和substr的详细介绍与用法
Aug 29 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
Postman动态获取返回值过程详解
Jun 30 Javascript
js动态生成表格(节点操作)
Jan 12 Javascript
node实现登录图片验证码的示例代码
Apr 20 #Javascript
vue项目中api接口管理总结
Apr 20 #Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 #jQuery
js Element Traversal规范中的元素遍历方法
Apr 19 #Javascript
关于vue中的ajax请求和axios包问题
Apr 19 #Javascript
详解vue 数据传递的方法
Apr 19 #Javascript
Vue 去除路径中的#号
Apr 19 #Javascript
You might like
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
php录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
AngularJS通过$location获取及改变当前页面的URL
2016/09/23 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
2021/01/19 Vue.js
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
浅谈Python中的私有变量
2018/02/28 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Python的log日志功能及设置方法
2019/07/11 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
C#可否对内存进行直接的操作
2015/02/26 面试题
什么是GWT的Entry Point
2013/08/16 面试题
毕业生个人的求职信范文
2013/12/03 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
优秀团员个人总结
2015/02/26 职场文书
自考生自我评价
2019/06/21 职场文书
MySQL自定义函数及触发器
2022/08/05 MySQL