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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
JavaScript canvas实现围绕旋转动画
Nov 18 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
antd form表单数据回显操作
Nov 02 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 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保存信息到当前Session的方法
2015/03/16 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
Python对象的深拷贝和浅拷贝详解
2014/08/25 Python
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
浅析Python中的for 循环
2016/06/09 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
PyQt5响应回车事件的方法
2019/06/25 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
python绘制雪景图
2019/12/16 Python
浅谈python出错时traceback的解读
2020/07/15 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
普通院校学生的自荐信
2013/11/27 职场文书
服务宗旨标语
2014/07/01 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
停发工资证明范本
2015/06/12 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript