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 相关文章推荐
document.all还是document.getElementsByName?
Jul 21 Javascript
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
再谈ie和firefox下的document.all属性
Oct 21 Javascript
jQuery中的常用事件总结
Dec 27 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 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程序61条面向对象分析设计的经验小结
2008/11/12 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
动态样式类封装JS代码
2009/09/02 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
JS解析XML实例分析
2015/01/30 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
jQuery之动画ajax事件(实例讲解)
2017/07/18 jQuery
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
Flask框架模板继承实现方法分析
2019/07/31 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
python for循环remove同一个list过程解析
2019/08/14 Python
如何利用python进行时间序列分析
2020/08/04 Python
Python生成pdf目录书签的实例方法
2020/10/29 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
客户经理岗位职责
2013/12/08 职场文书
办理生育手续介绍信
2014/01/14 职场文书
运动会领导邀请函
2014/02/05 职场文书
贷款担保申请书
2014/05/20 职场文书
上海世博会口号
2014/06/19 职场文书
大学毕业生自我评价
2015/03/02 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL