一、文件结构

二、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. 层次分析法MATLAB

    输入成对比较矩阵,输出权重值和一致性检验结果. disp('请输入判断矩阵A(n阶)'); A=input('A='); [n,n]=size(A); x=ones(n,100); y=ones(n, ...

  2. iOS - CAReplicatorLayer 的运用

    http://www.cocoachina.com/ios/20151230/14822.html 序 CAReplicatorLayer可以复制自己子层的layer,并且复制的出来的layer和原来 ...

  3. bnd.bnd属性文件格式

    1.Header以大写字母开头 Bundle-Name: StoreAdminProductsTool 2.Instruction以-和小写字母开头 -sources: true 3. Macro形式 ...

  4. 读JS高性能总结——DOM编程(一)

    DOM是一个与语言无关的API,它在浏览器中的借口却是用JS来实现的. 浏览器通常会把DOM和JS独立实现. 在IE中,JS的实现名是JScript,位于jscript.dll文件中,DOM实现则是m ...

  5. BOT建设经营转让,PPP公私合作

    PPP.BOT两种模式有什么区别? BOT模式(build-operate-transfer),由投资方建设并专营一定期限最后移交政府的方式:PPP模式(public-private-partners ...

  6. centOS7 安装vsftp服务器

    一.目的:有许多时候我们需要从自己机器上,上传文件到Linux服务器上,想要上传文件就必须要通过FTP 协议(File Transfer Protocol(文件传输协议)).所以要在服务器上配置FTP ...

  7. ubuntukylin-16.04安装

    目录 安装 虚拟机安装 系统安装 vmware tools 安装 优化 1.切换软件源 2.软件源和软件更新 3.vim插件 4.安装Sublime Text 3 5.安装福昕阅读器 6.安装Anac ...

  8. iOS 9 学习系列:Storyboard References

    http://www.cocoachina.com/ios/20150922/13474.html 如果你曾经使用 interface builder 创建过一个复杂.界面非常多的应用,你就会明白最后 ...

  9. 配置一个Oracle共享服务器进程环境需要哪两项参数

    SHARED_SERVERS和DISPATCHERS. PROTOCOL(pro或prot): 调度程序要监听的网络协议.这是唯一必需的属性 ADDRESS(ADD或者ADDR): 指定调度程序正在上 ...

  10. 【时光回溯】【JZOJ3571】【GDKOI2014】内存分配

    题目描述 输入 输出 输出m行,每行一个整数,代表输入中每次程序变化后系统所需要的空闲内存单位数. 样例输入 2 3 1 4 1 4 2 2 1 2 1 1 1 1 1 样例输出 2 3 1 数据范围 ...