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代码
Jan 13 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
基于jquery实现省市联动特效
Dec 17 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 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会员权限控制实现原理分析
2011/05/29 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
JavaScript 格式字符串的应用
2010/03/29 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
React中this丢失的四种解决方法
2019/03/12 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
vue自定义正在加载动画的例子
2019/11/14 Javascript
python实现电子词典
2020/04/23 Python
Python函数式编程
2017/07/20 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
机电专业毕业生推荐信
2013/11/10 职场文书
考博专家推荐信
2014/05/10 职场文书
表扬稿范文
2015/01/17 职场文书
运动会开幕词
2015/01/28 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle