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 相关文章推荐
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
用JS实现图片轮播效果代码(一)
Jun 26 Javascript
js实现适合新闻类图片的轮播效果
Feb 05 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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文档更新介绍
2011/07/22 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
关于vue-router的beforeEach无限循环的问题解决
2017/09/09 Javascript
Python多线程学习资料
2012/12/19 Python
使用python绘制人人网好友关系图示例
2014/04/01 Python
python中实现php的var_dump函数功能
2015/01/21 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
快速查询Python文档方法分享
2017/12/27 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
Python如何使用input函数获取输入
2020/08/06 Python
Python使用Pygame绘制时钟
2020/11/29 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
GWT都有什么特性
2016/12/02 面试题
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
实习评语
2013/12/16 职场文书
受伤赔偿协议书
2014/09/24 职场文书
考试作弊检讨书
2014/10/21 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
2014年话务员工作总结
2014/11/19 职场文书
明星邀请函
2015/02/02 职场文书
创业计划书之酒吧
2019/12/02 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
Redis主从复制操作和配置详情
2022/09/23 Redis