文档章节

vue二.子组件向父组件传值

一月
 一月
发布于 2017/08/15 13:46
字数 238
阅读 12
收藏 0

我们通过this.$emit() 调用父组件的方法,通过this.$parent.$data.username获取兄弟组件里的属性。 

1.在子组件中创建一个按钮,给按钮绑定一个点击事件

2.在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数

3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

子组件向父组件传值成功
总结一下:

  • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
  • 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
  • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

© 著作权归作者所有

一月
粉丝 1
博文 27
码字总数 3622
作品 0
闵行
私信 提问
Vue进阶(六):组件之间的数据传递

Vue进阶(六):组件之间的数据传递 Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。 首先用脚手架工具 vue-cl...

sunhuaqiang1
2018/05/05
0
0
vue非父子组件之间的传值--bus(总线/观察者模式)

vue中父子组件的传值很简单,父组件向子组件传值通过属性的方式 <div id="app"> <hello :content="content"></hello> </div> <script type="text/javascript"> /vue父组件通过属性向子组件传......

成功需要积累
2018/05/29
0
0
Vue组件一-父组件传值给子组件

Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消...

mdiep
2018/05/13
0
0
Vue 2.x 实战之后台管理系统开发(二)

1. 导语 承接上文:Vue 2.x 实战之后台管理系统开发(一) 在上一篇文章中,我详细叙述了如何创建项目框架和引入各种后台常用插件,做好这些准备工作后,我们就可以着手进行页面的开发了。在...

小和子茶
2018/07/17
0
0
学了这么久,vue和微信小程序到底有什么样的区别?

前言 写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。相比之下,小程序的钩子函数要简单得多。 写了vue项目和小程序,发现二者有许多相同之处,在此想总结...

codeGoogle
2018/08/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android双向绑定原理简述

Android双向绑定原理简述 双向绑定涉及两个部分,即将业务状态的变化传递给UI,以及将用户输入信息传递给业务模型。 首先我们来看业务状态是如何传递给UI的。开启dataBinding后,编译器为布局...

tommwq
今天
2
0
Spring系列教程八: Spring实现事务的两种方式

一、 Spring事务概念: 事务是一系列的动作,它们综合在一起才是一个完整的工作单元,这些动作必须全部完成,如果有一个失败的话,那么事务就会回滚到最开始的状态,仿佛什么都没发生过一样。...

我叫小糖主
今天
6
0
CentOS 的基本使用

1. 使用 sudo 命令, 可以以 root 身份执行命令, 必须要在 /etc/sudoers 中定义普通用户 2. 设置 阿里云 yum 镜像, 参考 https://opsx.alibaba.com/mirror # 备份mv /etc/yum.repos.d/CentO...

北漂的我
昨天
3
0
Proxmox VE技巧 移除PVE “没有有效订阅” 的弹窗提示

登陆的时候提示没有有效的订阅You do not have a valid subscription for this server. Please visit www.proxmox.com to get a list of available options. 用的是免费版的,所以每次都提示......

以谁为师
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部