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 相关文章推荐
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 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和ACCESS写聊天室(二)
2006/10/09 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
javascript 操作文件 实现方法小结
2009/07/02 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
javascript入门教程基础篇
2015/11/16 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
React 项目迁移 Webpack Babel7的实现
2018/09/12 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
Python创建文件和追加文件内容实例
2014/10/21 Python
Python格式化输出%s和%d
2018/05/07 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
python db类用法说明
2020/07/07 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
十一酒店活动方案
2014/02/20 职场文书
股票投资建议书
2014/05/19 职场文书
2014年计生工作总结
2014/11/21 职场文书
小学班主任评语
2014/12/29 职场文书
财务个人年度总结范文
2015/02/26 职场文书
2016年寒假社会实践活动总结
2015/03/27 职场文书
怎样写观后感
2015/06/19 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python