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 相关文章推荐
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
微信小程序  action-sheet详解及实例代码
Nov 09 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 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上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
[34:39]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第二局
2016/03/05 DOTA
python提取内容关键词的方法
2015/03/16 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
体育馆的标语
2014/06/24 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
青涩记忆观后感
2015/06/18 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
CSS实现渐变色边框(Gradient borders)的5种方法
2022/03/25 HTML / CSS