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& ...
随机推荐
- 3个月零基础入门Python+数据分析，详细时间表+计划表分享
大家好,我是白云. 今天想给大家分享的是三个月零基础入门数据分析学习计划.有小伙伴可能会说,英语好像有点不太好,要怎么办?所以今天我给大家分享的资源呢就是对国内的小伙伴很友好,还附赠大家一份三个月学 ...
- C++ 1//设计立方体类 //创建立方体的类 //设计属性和行为 //获取立方体的面积和体积 //分别利用（全局函数 和 成员函数）判断俩个立方体是否相等
1 //设计立方体类 2 //创建立方体的类 3 //设计属性和行为 4 //获取立方体的面积和体积 5 //分别利用(全局函数 和 成员函数)判断俩个立方体是否相等 6 #include <i ...
- 『Java』成员内部类 匿名内部类
成员内部类 成员方法类是定义在一个类中的方法外的类,例如: public class Outer{ // 外部类 class Inner { // 内部类 // 内部类成员 } // 外部类成员 } ...
- rollup 开发环境搭建
rollup 开发环境搭建 初始化项目使用lerna管理项目 使用npm init 初始化项目 npm init -y 安装lerna并初始化项目 npm install lerna --save-d ...
- 1051 Pop Sequence (25分）栈
刷题 题意:栈的容量是5,从1~7这7个数字,写5个测试数据 做法:模拟栈 #include<bits/stdc++.h> using namespace std; const int m ...
- awk-05-数组
数组 数组: 存储一系列相同类型的元素,键/值方式存储,通过下标(键)来访问值 awk 中数组称为关联数组,不仅可以使用数字作为下标,还可以使用字符串作为下标 数组元素的键和值存储在 awk 程序内部 ...
- kivy之Label属性及文本标记实操练习
关于kivy内label功能有二部分内容,一个是label小部件属性,另一个是label文本标记属性,实操练习的效果图如下: . 现将label常用的这二类属性整理如下: 现在我们来进行实操练习,在p ...
- Java入门姿势【面向对象3】构造方法及其重载_方法的调用
上次我为大家写出啦"定义类与创建对象_了解局部变量",上篇文章代码可能较多,如没有了解透彻的话请打开下方文章在进行观看一下哦!! [Java入门姿势[面向对象2]定义类与创建对象_ ...
- RabbitMQ 安装与配置管理
rabbitmq安装 1. 安装erlang yum install erlang xmlto 2. 安装rabbitmq rpm包 #wget http://www.rabbitmq.com/rel ...
- ffmpeg细节整理记录
ffmpeg细节整理记录 1.-vcodec.-code:v.-c:v ffmpeg的官方文档 -vcodec 是 -code:v 别名. -vcodec codec (output) Set the ...