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全新UI编程 - Jetpack Compose 超详细教程
1. 简介 Jetpack Compose是在2019Google i/O大会上发布的新的库.Compose库是用响应式编程的方式对View进行构建,可以用更少更直观的代码,更强大的功能,能提高开发速 ...
- 《手把手教你》系列技巧篇（十六）-java+ selenium自动化测试-元素定位大法之By xpath下卷（详细教程）
1.简介 按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍定位倒数二个方法:By xpath.xpath 的定位方法, 非常强大. 使用这种方法几乎可以定位到页面上的任意元素. ...
- Fluid + GooseFS 助力云原生数据编排与加速快速落地
前言 Fluid 作为基于 Kubernetes 开发的面向云原生存算分离场景下的数据调度和编排加速框架,已于近期完成了 v0.6.0 版本的正式发布.腾讯云容器 TKE 团队一直致力于参与 Flui ...
- MySQL学习06（事务和索引）
事务 概述 什么是事务 事务就是将一组SQL语句放在同一批次内去执行 如果一个SQL语句出错,则该批次内的所有SQL都将被取消执行 MySQL事务处理只支持InnoDB和BDB数据表类型 事务的ACI ...
- vue源码解析之响应式原理
关于defineReactive等使用细节需要自行了解 一些关键知识点 $mount时 会 new Watcher 把组件的 updateComponent 方法传给watcher 作为getter ...
- Redis内存碎片
内存碎片大家都已经耳熟能详了.当Redis数据删除后,Redis释放的内存空间可能不是连续的,这就会带来一个问题,这些不连续的内存空间有可能处于闲置的,但是redis缺无法来保存数据,这就会减低Red ...
- pikachu Files Inclusion
文件包含分为远程文件包含和远程文件包含 比如程序员为了提高效率让代码看起来简洁,会使用包含函数的功能,写多个文件 之后需要了进行调用,比如.c写了很多个函数分别在不同的文件里,用的时候直接 引用文件即 ...
- idea打断点后发现被标记的断点处那一行整行被标记了其他颜色，前面没有断点标识的红点
问题如下: 最后发现有两种解决办法吧,直接走起! 第一种方法: 在View====>Active Editor====>Show Gutter Icons,勾选此选项,发现小红点出来了: ...
- COM笔记-类厂
CoCreateInstance实际上并没有直接创建COM组件 ,而是创建了一个被称作是类厂的组件.而所需的组件正是由些类厂创建的.类厂组件的唯一功能就创建其他的组件.创建组件的标准接口是IClass ...
- vue引入zTree入门
参考1:https://blog.csdn.net/tg928600774/article/details/80911589 参考2:https://blog.csdn.net/ylhsuper/ar ...