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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
jQuery输入城市查看地图使用介绍
May 08 Javascript
jquery实现简单合拢与展开网页面板的方法
Sep 01 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
学习vue.js条件渲染
Dec 03 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
vue时间格式化实例代码
Jun 13 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
利用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函数extension_loaded()用法实例
2015/01/19 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
Javascript学习笔记 delete运算符
2011/09/13 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
python编程线性回归代码示例
2017/12/07 Python
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
EJB timer的种类
2014/10/28 面试题
机电专业大学生求职信
2013/10/04 职场文书
护理不良事件检讨书
2014/02/06 职场文书
社会调查研究计划书
2014/05/01 职场文书
综治维稳工作汇报
2014/10/27 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
如何用python反转图片,视频
2021/04/24 Python
Python实现简单的俄罗斯方块游戏
2021/09/25 Python