vue2.0 如何把子组件的数据传给父组件(推荐)


Posted in Javascript onJanuary 15, 2018

在父组件 App.vue 中引用子组件 A.vue,把 A中的数据传给App.

ps:没看父组件传给子组件的先看看去。

1、代码

子组件 A.vue

<template>
 <div>
 <h3>这里是子组件的内容</h3>
 <button v-on:click="spot">点一下就传</button>
 </div>
</template>

<script>
 export default {
 methods: {
  spot: function() {
  // 与父组件通信一定要加上这句话
  this.$emit("spot", '我是子组件传给父组件的内容就我。。')
  }
 }
 }
</script>

父组件 App.vue

<template>
 <div id="app">
 <!-- 父组件直接用 v-on 来监听子组件触发的事件。 -->
 <!-- 需跟子组件中的$emit组合使用 -->
 <A v-on:spot="spot"/>
 </div>
</template>

<script>
import A from './components/A'
export default {
 name: 'App',
 components: {
 A
 },
 methods:{
 spot:function(data){
  console.log(data)
 }
 }
}
</script>

2、总结

1、$emit很重要,使用 $emit(事件名,参数) 触发事件

2、子组件需要某种方式来触发自定义事件

3、父组件直接用 v-on 来监听子组件触发的事件,需跟子组件中的$emit组合使用。

3、效果

vue2.0 如何把子组件的数据传给父组件(推荐)

总结

以上所述是小编给大家介绍的vue2.0 如何把子组件的数据传给父组件(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
有一段有意思的代码-javascript现实多行信息
Aug 26 Javascript
html数组字符串拼接的最快方法
Sep 16 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
AngularJS变量及过滤器Filter用法分析
Nov 22 Javascript
原生JS实现层叠轮播图
May 17 Javascript
vue自动化表单实例分析
May 06 Javascript
React+Webpack快速上手指南(小结)
Aug 15 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 Javascript
如何利用js在两个html窗口间通信
Apr 27 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 #Javascript
js实现一个简单的MVVM框架示例
Jan 15 #Javascript
详解angularjs 学习之 scope作用域
Jan 15 #Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 #Javascript
关于axios如何全局注册浅析
Jan 14 #Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 #Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 #Javascript
You might like
用PHP调用数据库的存贮过程!
2006/10/09 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
window.location.hash 使用说明
2010/11/08 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
python修改操作系统时间的方法
2015/05/18 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
python 美化输出信息的实例
2018/10/15 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
Django 用户认证组件使用详解
2019/07/23 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
入股协议书范本
2014/04/14 职场文书
优秀毕业生求职信
2014/06/05 职场文书
党员进社区活动总结
2015/05/07 职场文书
项目验收申请报告
2015/05/15 职场文书
被委托人身份证明
2015/08/07 职场文书