Vue组件传值（二）之 非父子组件传值
Vue中非父子组件之间是如何实现通信的？
本章主要讲的是非父子组件传值，父子组件传值请看上一篇文章。
1、创建新的Vue实例引入项目中，通过$emit、$on来实现非父子组件传值；
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Vue非父子组件传值-雨中愚</title>
8 </head>
9 <body>
10 <div id="app"></div>
11 </body>
12 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
13 <script>
14 //创建新的Vue实例，引入Vue原型中，方便调用；
15 Vue.prototype.eventBus = new Vue();
16
17 const child1 = {23 methods:{
24 handleSendMsg(){
25 //通过$emit向外层触发事件并传递参数；第一个参数是事件名字随便起但需跟$on中的事件名字一样
26 this.eventBus.$emit('eventName','第二个参数是你想要传递的值')
27 },
28 },
29 template:
30 `<div>
31 <h2>我是组件1</h2>
32 <button @click="handleSendMsg">向其他组件发送值</button>
33 <hr/>
34 </div>`,
35 }
36
37 const child2 = {
38 data:function(){
39 return {
40 msg: '',
41 }
42 },
43 mounted(){
44 //$on监听child1组件的事件来实现传值；第一个参数是事件名字随便起但需跟$emit中的事件名字一样，第二个为回调函数
45 this.eventBus.$on('eventName',(data)=>{
46 //触发事件才会执行；
47 this.msg = data;
48 })
49 },
50 template:
51 `<div>
52 <h2>我是组件2</h2>
53 <p>接收到的值事：{{msg}}</p>
54 </div>`,
55 }
56
57 var vm = new Vue({
58 el: "#app",
59 components:{
60 child1,
61 child2
62 },
63 template:`
64 <div>
65 <child1/>
66 <child2/>
67 </div>
68 `,
69 })
70 </script>
71 </html>
2、是否感觉非父子之间传值很神奇，那么如何自己实现$on、$emit、$off，通过写入下面标红代码即可实现非父子组件传值；
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Vue非父子组件传值-雨中愚</title>
8 </head>
9 <body>
10 <div id="app"></div>
11 </body>
12 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
13 <script>
14
15 const eventList = {};
16 const $on = function(eventName,cb){
17 if(!eventList[eventName]){
18 eventList[eventName] = [];
19 }
20 eventList[eventName].push(cb);
21 }
22 const $emit = function(eventName,params){
23 if(!eventList[eventName]){
24 return;
25 }
26 var eventarr = eventList[eventName];
27 eventarr.map(cb=>{
28 cb(params);
29 })
30 }
31 const $off = function(eventName){
32 eventList[eventName]=[];
33 }
34
35 const eventBus = {
36 $on,
37 $emit,
38 $off
39 }
40 Vue.prototype.eventBus = eventBus;
41
42 const child1 = {48 methods:{
49 handleSendMsg(){
50 //通过$emit向外层触发事件并传递参数；第一个参数是事件名字随便起但需跟$on中的事件名字一样
51 this.eventBus.$emit('eventName','第二个参数是你想要传递的值')
52 },
53 },
54 template:
55 `<div>
56 <h2>我是组件1</h2>
57 <button @click="handleSendMsg">向其他组件发送值</button>
58 <hr/>
59 </div>`,
60 }
61
62 const child2 = {
63 data:function(){
64 return {
65 msg: '',
66 }
67 },
68 mounted(){
69 //$on监听child1组件的事件来实现传值；第一个参数是事件名字随便起但需跟$emit中的事件名字一样，第二个为回调函数
70 this.eventBus.$on('eventName',(data)=>{
71 //触发事件才会执行；
72 this.msg = data;
73 })
74 },
75 template:
76 `<div>
77 <h2>我是组件2</h2>
78 <p>接收到的值事：{{msg}}</p>
79 </div>`,
80 }
81
82 var vm = new Vue({
83 el: "#app",
84 components:{
85 child1,
86 child2
87 },
88 template:`
89 <div>
90 <child1/>
91 <child2/>
92 </div>
93 `,
94 })
95 </script>
96 </html>
Vue组件传值（二）之 非父子组件传值的更多相关文章
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- vue2.0父子组件以及非父子组件通信
官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue 非父子组件传值
/*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...
- 组件基础（非父子组件传值）—Vue学习笔记
最近几天忙着写Api去了,抽空把后面的内容下出来,然后再分享给大家web可以使用的api. 上次说了父子组件直接的传值,这次看一下非父子组件之间的传值(总线机制) 要实现非父子组件之间的传值非常重要的 ...
- vue bus方式解决非父子组件间的传值
对于非父子组件之间的传值 通常使用VUEX 和总线等方式解决 这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...
- Vue兄弟组件(非父子组件)状态共享与传值
前言:网上大部分文章写的有点乱,很少有讲得易懂的文章. 所以,我写了篇在我能看得懂的基础上又照顾到大家的文章 =.= 作者:X1aoYE 备注:此文原创,转载请注明~ 内容里的<br> ...
- Vue父子，子父，非父子组件之间传值
Vue组件基础 纯属随笔记录,具体详细教程,请查阅vue.js网站 子组件给父组件传值: <body> <div id="app"> <my-app& ...
随机推荐
- 为什么大部分的Android开发成为不了架构师
小团队一般 10 人左右,其中常常是技术最牛的人做架构师(或TL).所以,架构师在广大码农中的占比大概平均不到 10%.而架构师也可以分为初级.中级.高级三档,江湖上真正高水平的软件架构师就更少了. ...
- 物理机安装ESXi并优化部署虚拟机
物理机配置 CPU,BIOS中启用虚拟化(VT-X) 内存和硬盘,内存尽量大.硬盘最好SSD,内存的大小和硬盘的速度直接决定了虚拟机运行的快慢 网络,至少一块千兆网卡(vSphere7.0版本以后支持 ...
- shell——sort、uniq、tr、cut和eval命令
一.排序命令sort 以行位单位对文件内容进行排序,也可以根据不同的数据类型进行排序 格式:sort [选项] 参数 格式:cat file | sort 选项 1.2常用选项 选项说明 -f 忽略大 ...
- Ubuntu本地提权适配不同小版本内核（CVE-2017-16995）
朋友在执行的时候说有的会出现提权不成功,内核crash掉的现象.因为cred结构体的偏移量可能因为内核版本不同.内核编译选项不同而出现差异,作者给的exp偏移量是写死的,所以exp里面对应的偏移地址也 ...
- STM32—驱动六轴MPU6050输出欧拉角
文章目录 一.MPU6050介绍 1.MPU6050与陀螺仪.加速度计的关系: 2.整体概括 3.引脚说明 4.基本配置及相关寄存器 电源管理寄存器1 陀螺仪配置寄存器 加速度计配置寄存器 FIFO使 ...
- Longhorn，企业级云原生容器分布式存储 - K8S 资源配置示例
内容来源于官方 Longhorn 1.1.2 英文技术手册. 系列 Longhorn 是什么? Longhorn 企业级云原生容器分布式存储解决方案设计架构和概念 Longhorn 企业级云原生容器分 ...
- java-将数组调整为左奇右偶
先将偶数个数找出来 然后将奇数偶数分别保存到数组 然后写入 时间复杂度为O(n); public class test{ public static void main(String[] args){ ...
- vue:Missing space before value for key 'components'
原因是Vue对语法比较严格,而eslint是一个语法检查工具,对语法要求极其苛刻严格,于是就error了 解决办法是关闭eslint的语法规则,找到build/webpack.base.conf.js ...
- Spring详解（十）加载配置文件
在项目中有些参数经常需要修改,或者后期可能会有改动时,那我们最好把这些参数放到properties文件中,在源代码中读取properties里面的配置,这样后期只需要改动properties文件即可, ...
- 关于servlet中要写初始化逻辑应该重载有参还是无参的init
关于开发者在写初始化逻辑的时候,应该选用的哪个init方法@author mzy 在查看servlet的源码的时候,因为servlet是一个接口使用较麻烦: 所以我们使用它的实现类:GenericSe ...