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 &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
自己整理的一个javascript日期处理函数
Oct 16 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
JavaScript对数组进行随机重排的方法
Jul 22 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
VUE重点问题总结
Mar 19 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 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 带逗号千位符数字的处理方法
2012/01/10 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
载入进度条 效果
2006/07/08 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
Django中多种重定向方法使用详解
2019/07/17 Python
Python测试模块doctest使用解析
2019/08/10 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
C语言笔试题
2014/09/04 面试题
教师推荐信范文
2013/11/24 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
公司出纳岗位职责
2015/03/31 职场文书
思品教学工作总结
2015/08/10 职场文书
2016年离婚协议书范文
2016/03/18 职场文书