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& ...
随机推荐
- Upload-labs 文件上传靶场通关攻略(上)
Upload-labs 文件上传靶场通关攻略(上) 文件上传是Web网页中常见的功能之一,通常情况下恶意的文件上传,会形成漏洞. 逻辑是这样的:用户通过上传点上传了恶意文件,通过服务器的校验后保存到指 ...
- C++ //纯虚函数和抽象类 // 语法 virtual 返回值类型 函数名 （参数列表）=0 //当类中有了纯虚函数 这个类也称为抽象类
1 //纯虚函数和抽象类 2 // 语法 virtual 返回值类型 函数名 (参数列表)=0 3 //当类中有了纯虚函数 这个类也称为抽象类 4 5 6 #include <iostream& ...
- iptables 及容器网络分析
本文独立博客阅读地址:https://ryan4yin.space/posts/iptables-and-container-networks/ 本文仅针对 ipv4 网络 iptables 提供了包 ...
- Build Puppet Clusters with Vagrant
$ cd ~/docs/propuppetex/chapter3 $ cat Vagrantfile Vagrant.configure(VAGRANTFILE_API_VERSION) do |co ...
- 跟我一起写 Makefile（十四）
使用make更新函数库文件 ----------- 函数库文件也就是对Object文件(程序编译的中间文件)的打包文件.在Unix下,一般是由命令"ar"来完成打包工作. 一.函数 ...
- ant的copy标签使用方法
对于ant里拷贝用的标签的用法,此文(来自 http://electiger.blog.51cto.com/112940/39575 )讲得很好,注意其中黑体字部分,今天被这个问题耽误了20分钟. A ...
- Build VM Cluster on CentOS Host
Host Machine [root@bocoty49 ~]# lsb_release -a LSB Version: :base-4.0-amd64:base-4.0-noarch:core-4.0 ...
- shell——if、case例题
目录 例题一:检查用户家目录中的 test.sh 文件是否存在,并且检查是否有执行权限 例题二:提示用户输入100米赛跑的秒数,要求判断秒数大于0且小于等于10秒的进入选拔赛,大于10秒的都淘汰,如果 ...
- 题解 UVA10225 Discrete Logging
本题是一道 \(BSGS\) 裸题,用于求解高次同余方程,形如 \(a^x\equiv b(\mod p)\),其中 \(a\),\(p\) 互质(不互质还有 \(EXBSGS\)). 建议多使用 \ ...
- 题解 God Knows
传送门 这里有个线段树维护单调栈的神仙技巧 同机房dalao @Yubai的不同理解方式 yysy,我考场上连\(n^2\)的暴力都没搞出来 这里实际上求的是最小权极大上升子序列 但这个跟题目几乎没什 ...