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 -- 组件封装用 ...
随机推荐
- ConcurrentModificationException解决办法
package test.my.chap0302; import java.util.ArrayList; import java.util.Iterator; import java.util.Li ...
- iscroll5在使用情况下click事件失效的问题
转载自:http://www.52html5.com/?p=2618 Bug描述: iOS.android4.4+下不能触发click事件. Bug解决: 调用iscroll插件,增加配置参数:cli ...
- vscode中编译输出c++是乱码
vscode中编译输出c++是乱码的解决 环境说明:windows下面运行vscode win + R 右键属性 查看当前编码状态 知道当前环境的编码格式后,可以改变vscode上c++的格式 点击v ...
- Oracle 定义变量总结
首先,当在cmd里办入scott密码提示错误时,可以这样改一下,scott的解锁命令是: 以system用户登录:cmdsqlplus system/tigertigeralter user scot ...
- 【JZOJ4929】【NOIP2017提高组模拟12.18】B
题目描述 在两个n*m的网格上染色,每个网格中被染色的格子必须是一个四联通块(没有任何格子被染色也可以),四联通块是指所有染了色的格子可以通过网格的边联通,现在给出哪些格子在两个网格上都被染色了,保证 ...
- QT，QLabel添加超链接
1.方法1:使用信号槽绑定方式 //设置超链接并绑定信号槽QLabel *linkLabel = new QLabel(); linkLabel->setText("<a hre ...
- srand函数
srand函数是随机数发生器的初始化函数. 原型: void srand(unsigned seed); 用法:它需要提供一个种子,这个种子会对应一个随机数,如果使用相同的种子后面的rand()函数会 ...
- Laravel 登录后清空COOKIE 方法
需求 在Laravel 登陆立即清空保存的COOKIE数组 实现 # Http/Controllers/Auth/LoginController.php public function redirec ...
- Linux 下的mysql+centos7+主从复制
mysql+centos7+主从复制 MYSQL(mariadb) MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可.开发这个分支的原因之一是:甲骨文公 ...
- 2013年山东省第四届ACM大学生程序设计竞赛E题:Alice and Bob
题目描述 Alice and Bob like playing games very much.Today, they introduce a new game. There is a polynom ...