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中window.event事件用法详解
Dec 11 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
浅谈被jQuery抛弃的函数及替代函数
May 03 Javascript
简单实现js浮动框
Dec 13 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
javaScript把其它类型转换为Number类型
Oct 13 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的autoLoad自动加载机制
2012/09/27 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
php strftime函数的详细用法
2018/06/21 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
2020/10/26 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
Python 字典dict使用介绍
2014/11/30 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
python小白学习包管理器pip安装
2020/06/09 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
Square Off美国/加拿大:世界上最聪明的国际象棋棋盘
2018/12/06 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
新领导上任欢迎词
2014/01/13 职场文书
班级旅游计划书
2014/05/03 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
毕业生对母校寄语
2015/02/26 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python