<!DOCTYPE html>
　　<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>componentKnowledge-同级组件通信</title>
　　　　<script src="js/vue.js"></script>
　　</head>
　　<body>

　　<template id="aa">
　　　　<div>
　　　　　　I am aa component:{{msg}}
　　　　　　<input type="button" @click="send" value="SendTo-cc">
　　　　</div>
　　</template>

　　<template id="bb">
　　　　<div>
　　　　　　I am bb component:{{msg}}
　　　　　　<input type="button" @click="send" value="SendTo-cc">
　　　　</div>
　　</template>

　　<template id="cc">
　　　　<div>
　　　　　　<div>
　　　　　　I am cc component:{{msg}}/receive data:{{msg2}},{{msg3}}
　　　　　　</div>
　　　　</div>
　　</template>

　　<script>
　　window.onload=function(){
　　　　let Event=new Vue();

　　　　let aa={//定义组件
　　　　　　template:'#aa',
　　　　　　data(){
　　　　　　　　return {msg:'aa data'}
　　　　　　},
　　　　　　methods:{
　　　　　　　　send(){
　　　　　　　　　　Event.$emit('a-send',this.msg)
　　　　　　　　}
　　　　　　}
　　　　};

　　　　let bb={//定义组件
　　　　　　template:'#bb',
　　　　　　data(){
　　　　　　　　return {msg:'bb data'}
　　　　　　},
　　　　　　methods:{
　　　　　　　　send(){
　　　　　　　　Event.$emit('b-send',this.msg)
　　　　　　　　}
　　　　　　}
　　　　};

　　　　let cc={//定义组件
　　　　　　template:'#cc',
　　　　　　data(){
　　　　　　　　return {
　　　　　　　　　　msg:'cc data',
　　　　　　　　　　msg2:'',
　　　　　　　　　　msg3:''
　　　　　　　　}
　　　　　　},
　　　　　　mounted(){
　　　　　　　　Event.$on('a-send',(data)=>{this.msg2=data});
　　　　　　　　Event.$on('b-send',(data)=>{this.msg3=data});
　　　　　　}
　　　　};

　　　　let vm=new Vue({
　　　　　　el:'#app',
　　　　　　components:{//注册组件
　　　　　　　　aa,
　　　　　　　　bb,
　　　　　　　　cc
　　　　　　}
　　　　});
　　}
　　　　/*同级组件之间的通信关键总结：
　　　　　　1：新建一个空的root组件:let Event=new Vue();
　　　　　　　　其上有两个方法Event.$emit('a-fnName',data)/Event.$on('a-fnName',(data)=>{})
　　　　　　2:发送数据的组件：Event.$emit('a-fnName',data)写在组件的methods里，
　　　　　　3:接收数据的组件：Event.$on('a-fnName',(data)=>{}),注意函数格式必须写为箭头函数，不然this指向不是当前组件，一般写在钩子函数里(beforeCreate(){}/created(){}/beforeMount(){}/Mounted(){}/beforeUpdate(){}/updated(){}/beforeDestroy(){}/destroyed(){})

　　　　*/
　　</script>
　　　　<div id="app">

　　　　　　<!--使用组件-->
　　　　　　<aa></aa>
　　　　　　<bb></bb>
　　　　　　<cc></cc>
　　　　</div>
　　</body>
</html>

Vue.js组件之同级之间的通信的更多相关文章

  1. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  2. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  3. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

  4. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

  5. Vue.js 组件的三个 API：prop、event、slot

    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...

  6. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  7. Vue.js组件的重要选项

    Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...

  8. 聊聊Vue.js组件间通信的几种姿势

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

  9. vue.js 组件之间传递数据

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...

随机推荐

  1. 几个获取Windows系统信息的Delphi程序

    1.获取windows版本信息 可以通过Windows API函数GetVersionEx来获得. 具体程序如下: Procedure Tform1.Button1Click(sender:TObje ...

  2. QT移植

    QT下载地址:http://download.qt.io/archive/qt/1.编译tslib(touch screen lib) 准备工作:确保以下工具安装完成 sudo apt-get ins ...

  3. HDU-5123-who is the best?

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5123 水题一个,直接hash: 代码 #include<stdio.h>#include& ...

  4. oracle存储过程中文乱码问题

    设置环境变量,新建变量,设置变量名:NLS_LANG,变量值:SIMPLIFIED CHINESE_CHINA.ZHS16GBK word哥,还是不行呀: 参考:http://idata.blog.5 ...

  5. HDU-1275-两车追及或相遇问题（数学题目）

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1275 这题是一个数学题目,知道两个公式那就好办了: 对头相遇时:time*(v1+v2)=d*(2*i ...

  6. Flex移动应用程序开发的技巧和窍门(二)

    范例文件 flex-mobile-dev-tips-tricks-pt2.zip 这是关于Flex移动应用程序开发的技巧和窍门的一系列文章中的第二部分.第一部分 内容主要集中讨论了视图之间以及应用程序 ...

  7. 《InsideUE4》UObject（四）类型系统代码生成

    你想要啊?想要你就说出来嘛,你不说我怎么知道你想要呢? 引言 上文讲到了UE的类型系统结构,以及UHT分析源码的一些宏标记设定.在已经进行了类型系统整体的设计之后,本文将开始讨论接下来的步骤.暂时不讨 ...

  8. 简单的Elf逆向Writeup

    ElfCrackMe1 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acrony ...

  9. Mcaca+Python 测试环境搭建及上手

    Macaca是一套面向用户端软件的测试解决方案,提供了自动化驱动,周边工具,集成方案,旨在解决终端上的测试.自动化.性能等方面的问题,很多人选择它的原因简单:轻量化(相比于appium),跨平台(wi ...

  10. 【m元素集合的n个元素子集】

    /* m元素集合的n个元素子集 说明: 假设有个集合拥有m个元素,任意的从集合中取出n个元素,则这n个元素所形成的可能子集有那些? 解法: 假设有5个元素的集点,取出3个元素的可能子集如下: {1 2 ...