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的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
javascript自定义加载loading效果
Sep 15 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
vue 数据双向绑定的实现方法
Mar 04 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
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
功能强大的php文件上传类
2016/08/29 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python中分支语句与循环语句实例详解
2018/09/13 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
mac使用python识别图形验证码功能
2020/01/10 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
接口可以包含哪些成员
2012/09/30 面试题
校园之声广播稿
2014/01/31 职场文书
绿化工程实施方案
2014/03/17 职场文书
小学生综合素质评语
2014/04/23 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
Django显示可视化图表的实践
2021/05/10 Python