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高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 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
PHP 字符串操作入门教程
2006/12/06 PHP
php中的时间显示
2007/01/18 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
Python实现简单的可逆加密程序实例
2015/03/05 Python
python实现简单的计时器功能函数
2015/03/14 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
django基于restframework的CBV封装详解
2019/08/08 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
《九寨沟》教学反思
2014/04/08 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
大学生自荐书范文
2015/03/05 职场文书
食品药品安全责任书
2015/05/11 职场文书
python可视化大屏库big_screen示例详解
2021/11/23 Python