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 相关文章推荐
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
半个小时学json(json传递示例)
Dec 25 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
html实现随机点名器的示例代码
Apr 02 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 &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
Javascript读取cookie函数代码
2010/10/16 Javascript
web前端开发也需要日志
2010/12/09 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
Bootstrap 树控件使用经验分享(图文解说)
2017/11/06 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Python聊天室程序(基础版)
2018/04/01 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
C#软件工程师英语面试题
2015/06/07 面试题
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
大学自我鉴定范文
2013/12/26 职场文书
企业宣传方案
2014/03/04 职场文书
党员干部公开承诺书
2014/03/26 职场文书
小学学雷锋活动总结
2014/04/25 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
企业法律事务工作总结
2015/08/11 职场文书