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 相关文章推荐
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
layui table设置前台过滤转义等方法
Aug 17 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 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/10/09 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
jquery 之 $().hover(func1, funct2)使用方法
2012/06/14 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
jQuery中even选择器的定义和用法
2014/12/23 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
python实现简单购物商城
2016/05/21 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
导致python中import错误的原因是什么
2020/07/01 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
安全保证书
2015/01/16 职场文书
七年级作文之环保作文
2019/10/17 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
使用Django实现商城验证码模块的方法
2021/06/01 Python
Python的这些库,你知道多少?
2021/06/09 Python
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
app场景下uniapp的扫码记录
2022/07/23 Java/Android