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 相关文章推荐
js获取变量
Aug 24 Javascript
Javascript 类与静态类的实现(续)
Apr 02 Javascript
基于jQuery实现的文字按钮表单特效整理
Dec 07 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
node前端开发模板引擎Jade的入门
May 11 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
原生js拖拽实现图形伸缩效果
Feb 10 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
jQuery中prev()方法用法实例
2015/01/08 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
拖动时防止选中
2017/02/03 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
使用PYTHON创建XML文档
2012/03/01 Python
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
python实现二分查找算法
2017/09/21 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
Python交互式图形编程的实现
2019/07/25 Python
python 实现让字典的value 成为列表
2019/12/16 Python
什么是python的自省
2020/06/21 Python
Python dict的常用方法示例代码
2020/06/23 Python
sklearn的predict_proba使用说明
2020/06/28 Python
用 python 进行微信好友信息分析
2020/11/28 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
介绍一下write命令
2012/09/24 面试题
大学活动邀请函
2014/01/28 职场文书
入党自我鉴定
2014/03/25 职场文书
创业培训计划书
2014/05/03 职场文书
李培根演讲稿
2014/05/22 职场文书
2014年审计工作总结
2014/11/17 职场文书
表扬信范文
2015/05/04 职场文书
常住证明范本
2015/06/23 职场文书
环保建议书作文300字
2015/09/14 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL