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 相关文章推荐
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
心扬JS分页函数代码
Sep 10 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
JS对象的深度克隆方法示例
Mar 16 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
使用PHP数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
ini_set的用法介绍
2014/01/07 PHP
JS中style属性
2006/10/11 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
elementUI 动态生成几行几列的方法示例
2019/07/11 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
python常用函数详解
2016/09/13 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python实现静态服务器
2019/09/05 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
五分钟演讲稿
2014/04/30 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers