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的使ListNav兼容中文首字拼音排序的实现代码
Jul 10 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
jQuery ajax应用总结
Jun 02 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
JavaScript实现五子棋小游戏
Oct 26 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实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
2014/02/17 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
微信小程序实现留言板功能
2018/11/02 Javascript
js设计模式之代理模式及订阅发布模式实例详解
2019/08/15 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python实现一个简单的ping工具方法
2019/01/31 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
python3格式化字符串 f-string的高级用法(推荐)
2020/03/04 Python
Python 创建守护进程的示例
2020/09/29 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
采用怎样的方法保证数据的完整性
2013/12/02 面试题
函授本科自我鉴定
2013/11/03 职场文书
装配出错检讨书
2014/09/23 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
详解pytorch创建tensor函数
2022/03/22 Python
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL