举个栗子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../Vue.js"></script>
  7.     <template id="tpl1">
  8.         <h3>我是父组件  -->{{msg}}</h3>
  9.         <bbb @child-data="get"></bbb>
  10.     </template>
  11.     <template id="tpl2">
  12.         <input type="button" value="发送" @click="send()">
  13.         <h4>我是子组件  -->{{msg2}}</h4>
  14.     </template>
  15.     <script>
  16.         //子组件取父组件的数据
  17.         window.onload = function () {
  18.             new Vue({
  19.                 el:"#div",
  20.                 //局部小组件
  21.                 components:{
  22.                     'aaa':{
  23.                         data: function () {
  24.                             return {
  25.                                 msg:'我是父组件的数据'
  26.                             }
  27.                         },
  28.                         template:'#tpl1',
  29.                         methods: {
  30.                           get: function (m) {
  31.                               this.msg = m;
  32.                           }
  33.                         },
  34.                         components:{
  35.                             'bbb':{
  36.                                 data: function () {
  37.                                     return {
  38.                                         msg2: '我是子组件'
  39.                                     }
  40.                                 },
  41.                                 template:"#tpl2",
  42.                                 methods:  {
  43.                                     send:function (){
  44.                                         this.$emit('child-data',this.msg2);
  45.                                     }
  46.                                 }
  47.                             }
  48.  
  49.                         }
  50.                     }
  51.                 }
  52.             })
  53.         }
  54.     </script>
  55. </head>
  56. <body>
  57.  
  58. <div id="div">
  59.     <aaa></aaa>
  60. </div>
  61. </body>
  62. </html>

vue组件父子组件之间传递数据的更多相关文章

  1. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  2. Vue 非父子组件通信方案

    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...

  3. ThreadLocal父子线程之间的数据传递问题

    一.问题的提出 在系统开发过程中常使用ThreadLocal进行传递日志的RequestId,由此来获取整条请求链路.然而当线程中开启了其他的线程,此时ThreadLocal里面的数据将会出现无法获取 ...

  4. Vue中父子组件执行的先后顺序

    Vera   Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...

  5. Vue中父子组件执行的先后顺序探讨

    前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...

  6. Angular组件——父子组件通讯

    Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件 ...

  7. H5 页面与小程序之间 传递数据

    H5 页面与小程序之间 传递数据 小程序里面的 H5页面与小程序之间怎么传递数据 webview与小程序之间的实时通信 webview主动发消息给小程序 webview可以利用jssdk提供的 wx. ...

  8. 对于vue和react“页面间”传递数据的理解误区

    前言 如果我们想要实现多个标签页之间的通信,可以使用localStorage.cookie等,但是能不能用vue或react呢? 结论 答案是NO,因为vue和react虽然可以在“多个”页面之间传递 ...

  9. Activity之间传递数据的方式及常见问题总结

    Activity之间传递数据一般通过以下几种方式实现: 1. 通过intent传递数据 2. 通过Application 3. 使用单例 4. 静态成员变量.(可以考虑 WeakReferences) ...

  10. Controller之间传递数据：属性传值

    在项目中,Controller之间传递数据非常之多,这里简单介绍一下属性传值.例如有FirstController 和 SecondController,数据从First传递到Second中,我们如何 ...

随机推荐

  1. python urllib2使用细节

    刚好用到,这篇文章写得不错,转过来收藏.    转载自 道可道 | Python 标准库 urllib2 的使用细节 Python 标准库中有很多实用的工具类,但是在具体使用时,标准库文档上对使用细节 ...

  2. zookeeper启动错误 ---- Unable to load database on disk

    zk启动报错 解决办法,进入zkdata目录删除version-2下面的所有文件 参考: https://issues.apache.org/jira/browse/ZOOKEEPER-1546 [h ...

  3. oracle数据库中函数和存储过程中的区别

    一.函数必须有返回值,过程没有返回值: 二.函数可以单独执行,过程必须通过execute执行: 三.函数可以嵌入SQL中执行,过程不能. 可以将比较复杂的查询写成函数,然后在过程中调用.

  4. Some perl tips

    下面是日常工作中一些代码片段的总结,部分注释是后加的,采用了//这种形式,请勿套用. 1.取得用户输入print("Please input the date range:");$ ...

  5. 如何安装Android SDK Emulator

    1 下载并安装JDK,可以到官方网站寻找自己的对应版本下载 http://www.oracle.com/technetwork/java/javase/downloads/jdk-7u1-downlo ...

  6. Java 循环结构 - for, while 及 do...while

    Java 循环结构 - for, while 及 do...while 顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构. Java中有三种主要的循环结构: whi ...

  7. 计算两个有序数组的第K大数（转）

    传统解法,最直观的解法是O(m+n).直接merge两个数组,然后求第K大的数字. 如果想要时间复杂度将为O(log(m+n)).我们可以考虑从K入手.如果我们每次能够删除一个一定在第K个元素之前的元 ...

  8. ROS当中添加第三方库

      下文以serial 库为依据讲解第三方库在ROS下面的配置. 参考文献:http://blog.csdn.net/u011853479/article/details/51263590 ros中使 ...

  9. PICT工具安装使用

    前言:PICT工具在微软公司出品一款成对组合的命令行生成工具.PICT 可有效地按照两两测试Pairwise的原理,进行测试用例设计.在使用PICT时,需要输入与测试用例相关的所有参数,以达到全面覆盖 ...

  10. 关于清理 mac 其他文件的的方法

    mac 用于开发使用时间长硬盘会越来越小,速度越来越慢的, 亦是花了几分钟研究怎么清理系统的缓存, 方法: 1,到 https://www.omnigroup.com/more/ 安装 OmniDis ...