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 相关文章推荐
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
Oct 16 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
JS按回车键实现登录的方法
Aug 25 Javascript
javascript表单验证和Window详解
Dec 11 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
Apr 30 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
Bootstrap FileInput实现图片上传功能
Jan 28 Javascript
js基础语法与maven项目配置教程案例
Jul 15 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实现长连接的方法与注意事项的问题
2013/05/10 PHP
PHP 极验验证码实例讲解
2016/09/29 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
css图片自适应大小
2007/11/28 Javascript
jQuery入门知识简介
2010/03/04 Javascript
使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由
2010/06/28 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
vue生成token并保存到本地存储中
2018/07/17 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
python实现360的字符显示界面
2014/02/21 Python
python3.5绘制随机漫步图
2018/08/27 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
浅析python redis的连接及相关操作
2019/11/07 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
python的dict判断key是否存在的方法
2020/12/09 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
灵泰克Java笔试题
2016/01/09 面试题
教师党员承诺书
2014/03/25 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
刮痧观后感
2015/06/05 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
Python实现8种常用抽样方法
2021/06/27 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
JavaScript 对象创建的3种方法
2021/11/17 Javascript
关于MySQL中explain工具的使用
2023/05/08 MySQL