vue子组件使用自定义事件向父组件传递数据


Posted in Javascript onMay 27, 2017

使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称',传递给父组件的数据)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<parent-component></parent-component>
</div>
<template id="parent-component">
<div>
 <p>总数是{{total}}</p>
 <child-component @increment="incrementTotal"></child-component>
 <!--@increment是子组件this.$emit('increment'自定义的事件用来告诉父组件自己干了什么事
 然后会触发父子间incrementTotal的方法来更新父组件的内容)-->
</div>
</template>
<template id="child-component">
 <button @click="increment()">{{mycounter}}</button>
</template>
<script>
 var child=Vue.extend({
  template:"#child-component",
  data:function () {
   return {
    mycounter:0
   }
  },
  methods:{
   increment:function(){
    this.mycounter=10;
    this.$emit("increment",this.mycounter);//把this.mycounter传递给父组件
   }
  }
 })
 var parent=Vue.extend({
  data:function () {
   return {
    total:0
   }
  },
  methods:{
   incrementTotal:function(newValue){
    this.total+=newValue;
   }
  },
  template:"#parent-component",
  components:{
   'child-component':child
  }
 })
 var vm=new Vue({
  el:"#app",
  components:{
   'parent-component':parent
  }
 })
</script>
</body>
</html>

@increment是子组件this.$emit('increment'自定义的事件,newValue)用来告诉父组件自己干了什么事

同时还可以传递新的数据给父组件

然后会触发父子间incrementTotal的方法来更新父组件的内容)。

这里需要注意几个点:

1.

vue子组件使用自定义事件向父组件传递数据

图中红色圈中的部分是对应的,子组件在自己的methods方法里面写自己的事件实现,然后再父组件里面写字组件时给子组件绑定上methods方法里面的

事件名称,要一一对应

vue子组件使用自定义事件向父组件传递数据

这里自定义事件里面的要写父组件的方法名,父组件里面定义该方法。

vue子组件使用自定义事件向父组件传递数据

父组件里面的方法可以接收子组件this.$emit('increment',this.mycounter);传递过来的数值:this.mycounter,

到父组件的方法里面就是newValue参数,这样就实现了子组件向父组件传递数据

以上所述是小编给大家介绍的vue子组件使用自定义事件向父组件传递数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
js中function()使用方法
Dec 24 Javascript
node.js中的console用法总结
Dec 15 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
javascript回调函数的概念理解与用法分析
May 27 #Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 #Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 #Javascript
详细讲解vue2+vuex+axios
May 27 #Javascript
AngularJS获取json数据的方法详解
May 27 #Javascript
vue中用H5实现文件上传的方法实例代码
May 27 #Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 #Javascript
You might like
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
JS与框架页的操作代码
2010/01/17 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
python简单实现计算过期时间的方法
2015/06/09 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
Python中生成Epoch的方法
2017/04/26 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
python tkinter组件摆放方式详解
2019/09/16 Python
详解Python 函数参数的拆解
2020/09/02 Python
介绍一下Java的安全机制
2012/06/28 面试题
教师现实表现材料
2014/02/14 职场文书
幼师求职信
2014/06/23 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
python可视化之颜色映射详解
2021/09/15 Python