一、文件结构

二、vue.js

打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js　

复制粘贴页面的所有内容

三、index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>index</title>

 </head>

 <body>

     <div id="app">

         <huahua></huahua>

         <shuandan></shuandan>

     </div>

     <script src="../lib/vue.js"></script>

     <script src="./js/main.js"></script>

 </body>

 </html>

四、main.js

 // 外部的事件调度器

 var Event = new Vue();

 // 花花同学说话

 Vue.component("huahua",{

     template:`

         <div>

             我说：<input @keyup="on_change"  v-model="i_said"/>

         </div>

     `,

     data:function(){

         return{

             i_said:''

         }

     },

     methods:{

         on_change:function(){

             Event.$emit("huahua-said-something",this.i_said)

         }

     }

 });

 // 栓蛋同学听到后，复述花花同学说的话

 Vue.component("shuandan",{

     template:`

         <div>花花说：{{huahua_said}}</div>

     `,

     data:function(){

         return{

             huahua_said:''

         }

     },

     // 时间钩子，一旦这个组件初始化完成，就开始执行定义的方法

     mounted:function(){

         // 下面的this指向组件，将其赋值给变量me

         var me = this;

         // 使用调度器来监听事件

         Event.$on("huahua-said-something",function(data){

             // 下面的this指向Event对象（原因可能是由于回调函数是由Event对象执行的缘故）

             // console.log(this);

             me.huahua_said = data;

         })

     }

 });

 new Vue({

     el:"#app"

 });

五、效果

六、谢谢观看，如有问题，随时交流哦

Vue实现同级组件的通信的更多相关文章

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

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

  2. vue 和 react 组件间通信方法对比

    vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...

  3. vue仓库、组件间通信、前后台数据交互、前端储存数据大汇总

    目录 路由重定向 仓库介绍 vuex插件:可以完成任意组件间信息交互(移动端) 前端存储数据大汇总 前后台交互方式(重点) 前后台数据交互 axios插件:完成前后台ajax交互的 同源策略 - 前后 ...

  4. Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题

    1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法    父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...

  5. vue之父子组件间通信实例讲解(props、$ref、$emit)

       组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...

  6. 【vue】父子组件间通信----传值

    官方文档参考 (一)父组件 向 子组件 传值 ①在父组件中调用子组件处,绑定要传的数据data1, 如 <nav  :data1=" "  ></nav> ...

  7. vue.js 同级组件之间的值传递方法(uni-app通用)

    vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149

  8. vue非父子组件间通信

    有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...

  9. Vue.js 父子组件之间通信的方式

    Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...

随机推荐

  1. babel 7.x 结合 webpack 4.x 配置

    今天在学习webpack的使用的时候,由于学习的教程是2018年初的,使用的是 webpack 3.x 和 babel 6.x ,然后学习的过程中出现的了很多问题. 解决问题之后,总结一下新的 bab ...

  2. bnd workspace属性文件

    bnd workspace属性文件放在以下两个地方: workspace/cnf/build.bnd这个一般放以下公共配置信息 workspace/cnf/ext/...文件夹底下的各种bnd文件,一 ...

  3. ServletConfig详解 （转载）

    ServletConfig详解  (转载)   容器初始化一个servlet时,会为这个servlet建一个唯一的ServletConfig.容器从DD读出Servlet初始化参数,并把这些参数交给S ...

  4. 1.2开发文档简读，了解全貌.mp4

  5. jenkins使用教程！

    http://jenkins-ci.org/ 首先去官方下载war包,直接安装jenkins的方式比较麻烦. 下载tomcat,jdk和ant cd /optwget http://mirrors.h ...

  6. iOS小技巧：用runtime 解决UIButton 重复点击问题

    http://www.cocoachina.com/ios/20150911/13260.html 作者:uxyheaven 授权本站转载. 什么是这个问题 我们的按钮是点击一次响应一次, 即使频繁的 ...

  7. 2019-4-29-dotnet-通过-WMI-获取系统安装软件

    title author date CreateTime categories dotnet 通过 WMI 获取系统安装软件 lindexi 2019-04-29 12:18:59 +0800 201 ...

  8. 2013年山东省第四届ACM大学生程序设计竞赛E题:Alice and Bob

    题目描述 Alice and Bob like playing games very much.Today, they introduce a new game. There is a polynom ...

  9. 字体图标font-awesome

    其实有一些常见的图标使用字体图标比使用img来得好 Font Awesome 官网:http://fortawesome.github.io/Font-Awesome/ 字体代码:http://for ...

  10. 创建linux中的nginx+php7+mysql环境----PHP7安装

    默认CentOs 的源  并没有php7的安装路径,所以需要手动添加源: # rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-l ...