vue2.0父子组件间传递数据的方法


Posted in Javascript onAugust 16, 2018

关于父子组件之间传递数据其实文档上都说得很明白。

 但是如果完全不懂的人做计也看不懂,下面是一个小例子,有两个文件

1.parent.vue

<template>
 <child :child-msg="msg" @ok="event"></child>
</template>
<script>
import child from './child.vue';
export default {
 data(){
  return{
   msg:'hello worldgogo'
  }
 },
 components:{
  child
 },
 methods:{
  event(val){
    console.log(val);
  }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

2.child.vue

<template>
  <p>{{childMsghello}}</p>
</template>
<script>
export default {
  props: ['childMsg'],
  data(){
    return{
      childMsghello:this.childMsg+'this is child'
    }
  },
  created(){
    //自定义事件,并且给监听此事件的回调函数的值设为200
    this.$emit('ok','200');
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

总结

以上所述是小编给大家介绍的vue2.0父子组件间传递数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
vue实现计算器功能
Feb 22 Javascript
详细分析vue响应式原理
Jun 22 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 #Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 #Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 #Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 #Javascript
深入理解Vue router的部分高级用法
Aug 15 #Javascript
JS打印彩色菱形的实例代码
Aug 15 #Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 #Javascript
You might like
PHP函数getenv简介和使用实例
2014/05/12 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
JavaScript中实现Map的示例代码
2015/09/09 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
python查看数据类型的方法
2019/10/12 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
python如何获取apk的packagename和activity
2020/01/10 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
化工专业个人的求职信范文
2013/11/28 职场文书
电子技术专业中专生的自我评价
2013/12/17 职场文书
关于期中考试的反思
2014/02/02 职场文书
企业法人授权委托书
2014/04/03 职场文书
校外活动方案
2014/08/28 职场文书
行政上诉状范文
2015/05/23 职场文书
法律讲堂观后感
2015/06/11 职场文书
国际贸易实训总结
2015/08/03 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
python中pymysql包操作数据库方法
2022/04/19 Python
SQL Server中锁的用法
2022/05/20 SQL Server