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 -- 组件封装用 ...
随机推荐
- 【JZOJ4161】于神之怒 莫比乌斯反演
任务 答案mod 1e9+7. 解法 容易写出反演: Ans=∑T=1nTk∗∑i=1⌊nT⌋⌊niT⌋⌊miT⌋μ(i) ∑⌊nT⌋i=1⌊niT⌋⌊miT⌋μ(i)这个因式显然是经典的分块处理: ...
- Codeforces Round #197 (Div. 2) A. Helpful Maths【字符串/给一个连加计算式，只包含数字 1、2、3，要求重新排序，使得连加的数字从小到大】
A. Helpful Maths time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- Spring Boot 数据库连接池参数
挑战A.I.,赢百万奖金......了解更多详情>>> Tomcat JDBC 连接池 Spring Boot 默认选择 Tomcat JDBC Pool 作为数据库连接池.Tomc ...
- oracle误操作commit之后，可以闪回数据
1. 授予行迁移权限 alter table table_name enable row movement; 2. 到15分钟前: flashback table order to timesta ...
- HTTP请求响应头信息
HTTP请求响应头信息 请求:(request) 组成部分: 请求行 请求头 请求体 请求行:请求信息的第一行 格式:请求方式 访问的资源 协议/版本 例如:GET /day0801/1.html H ...
- python 正则表达式常用操作符
- NOIP模拟 7.03
Problem 1 抓牛(catchcow.cpp/c/pas) [题目描述] 农夫约翰被通知,他的一只奶牛逃逸了!所以他决定,马上出发,尽快把那只奶牛抓回来． 他们都站在数轴上．约翰在N(O≤N≤1 ...
- saltstack+python批量修改服务器密码
saltstack安装:略过 python脚本修改密码: # -*- coding utf-8 -*- import socket import re import os import sys imp ...
- 微信小程序 —— wepy 使用 Vant Weapp
一.下载 npm i @vant/weapp -S --production 下载完毕之后,就可以在 node_modules 文件夹里,看见下载的包了. 2.移动文件夹 把刚刚下载的包文件夹下的 l ...
- rsa加解密的内容超长的问题解决
一. 现象: 有一段老代码用来加密的,但是在使用key A的时候,抛出了异常:javax.crypto.IllegalBlockSizeException: Data must not be ...