Vue实现同级组件的通信
一、文件结构
二、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实现同级组件的通信的更多相关文章
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- vue 和 react 组件间通信方法对比
vue 和 react 组件间通信方法对比: 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).slot(推荐).this.$refs.this.$childr ...
- vue仓库、组件间通信、前后台数据交互、前端储存数据大汇总
目录 路由重定向 仓库介绍 vuex插件:可以完成任意组件间信息交互(移动端) 前端存储数据大汇总 前后台交互方式(重点) 前后台数据交互 axios插件:完成前后台ajax交互的 同源策略 - 前后 ...
- Vue的父子组件间通信及借助$emit和$on解除父子级通信的耦合度高的问题
1.父子级间通信,父类找子类非常容易,直接在子组件上加一个ref,父组件直接通过this.$refs操作子组件的数据和方法 父 这边子组件中 就完成了父 => 子组件通信 2. 子 =&g ...
- vue之父子组件间通信实例讲解(props、$ref、$emit)
组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 组件是 vue.js 最强大的功能之一,而组件实例 ...
- 【vue】父子组件间通信----传值
官方文档参考 (一)父组件 向 子组件 传值 ①在父组件中调用子组件处,绑定要传的数据data1, 如 <nav :data1=" " ></nav> ...
- vue.js 同级组件之间的值传递方法(uni-app通用)
vue.js 兄弟组件之间的值传递方法 https://blog.csdn.net/jingtian678/article/details/81634149
- vue非父子组件间通信
有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
随机推荐
- IntelliJ IDEA 下的SVN使用（傻瓜式教学）（转）
第一步:下载svn的客户端,通俗一点来说就是小乌龟啦!去电脑管理的软件管理里面可以直接下载,方便迅速 下载之后直接安装就好了,但是要注意这里的这个文件也要安装上,默认是不安装的,如果不安装,svn中的 ...
- 阿里云CDN边缘脚本EdgeScript公测：简单语法完成CDN复杂配置
CDN可以将源站内容分发至最靠近用户侧的节点,使得用户就近获取内容,提高用户的访问成功率和效率.作为CDN运维工程师,他的日常工作就是通过CDN系统的配置和管理,来确保CDN业务正常运转,以此来保障网 ...
- addEventListener－第三个参数 useCapture
转载自:http://www.cftea.com/c/2008/10/MQ0U26KP565GNM5Q.aspaddEventListener-开始 addEventListener-事件流 addE ...
- SPSS分析技术：二阶聚类分析；为什么出现大学生“裸贷”业务，因为放贷者知道贷款者还不起
SPSS分析技术:二阶聚类分析:为什么出现大学生"裸贷"业务,因为放贷者知道贷款者还不起 今天将介绍一种智能聚类法,二阶聚类法,在开始介绍之前,先解答很多人在后台提出的一个疑问:那 ...
- Directx11教程(10) 画一个简易坐标轴
原文:Directx11教程(10) 画一个简易坐标轴 本篇教程中,我们将在三维场景中,画一个简易的坐标轴,分别用红.绿.蓝三种颜色表示x,y,z轴的正向坐标轴. 为此,我们要先建立一个A ...
- [ 浙江大学 数据库系统原理 ] [ MiniSQL ]课程设计
工作流程图如下.代码详见https://github.com/gstggsstt/minisql. 注:课程设计时间紧迫,编码基本没有性能考虑,仅限于实现功能,索引未使用B+tree.
- python三种导入模块的方法和区别
方法一: import modname 模块是指一个可以交互使用,或者从另一Python 程序访问的代码段.只要导入了一个模块,就可以引用它的任何公共的函数.类或属性.模块可以通过这种方法来 使用其它 ...
- More Effective C++: 02操作符
05:谨慎定义类型转换函数 有两种函数允许编译器进行隐式类型转换:单参数构造函数(single-argument constructors)和隐式类型转换运算符.单参数构造函数是指只用一个参数即可以调 ...
- 「WC2018」即时战略
「WC2018」即时战略 考虑对于一条链:直接随便找点,然后不断问即可. 对于一个二叉树,树高logn,直接随便找点,然后不断问即可. 正解: 先随便找到一个点,问出到1的路径 然后找别的点,考虑问出 ...
- linux下清除tomcat缓存
进入tomcat/bin目录下,执行命令:./shutdown.sh 然后执行命令:ps -aux ,查看tomcat是否真的关闭了 如果没有关闭则执行命令:kill -9 #pid来彻底关闭tomc ...