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 相关文章推荐
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
js仿京东放大镜效果
Aug 09 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
vue实现购物车的小练习
Dec 21 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实现的随机广告显示代码
2007/06/14 PHP
php相当简单的分页类
2008/10/02 PHP
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
从源码里了解vue中的nextTick的使用
2018/11/22 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
《乞巧》教学反思
2014/02/27 职场文书
我的梦想演讲稿
2014/04/30 职场文书
特教教师先进事迹
2014/05/21 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
前台文员岗位职责
2015/02/04 职场文书
医院志愿者活动总结
2015/05/06 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
python使用glob检索文件的操作
2021/05/20 Python
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS