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& ...
随机推荐
- PWN——uaf漏洞学习
PWN--uaf漏洞 1.uaf漏洞原理 在C语言中,我们通过malloc族函数进行堆块的分配,用free()函数进行堆块的释放.在释放堆块的过程中,如果没有将释放的堆块置空,这时候,就有可能出现us ...
- jmeter永久调为中文
将jmeter调为中文有两种方法,一是在软件设置中切换,二是修改配置文件. 第一种方式是临时的,下次重新打开会变回为英文 第二种方式是永久的,每次打开都会显示自己配置好的语言 第一种方式: 第二种方式 ...
- 心酸！30岁深漂失业3个月，从巅峰跌落谷底，大龄Android开发必须要懂的事！
2021年3月,我的前同事,在我们群里说他准备回老家了,问我们有没有人可以暂时收养他的猫. --他说,这周末就要离开深圳了. 他失业了.3个多月没收入,还要交着房租,过年来之后找了快一个月的工作也没有 ...
- 【学习笔记】Expression表达式目录树
Expression表达式目录树:一个能拼装能解析的数据结构,语法树. 一.手动拼装表达式目录树 示例1: /// <summary> /// 展示表达式树,协助用的 /// 编译lamb ...
- 解析java源文件
尝试从java源文件中解析出类.方法.属性等信息,但下面的代码没有完全实现. Sub parseJava() Dim package_name as String 'read a file Docum ...
- Apache虚拟web主机构建
目录 一.构建虚拟web主机 1.1.虚拟web主机概述 二.搭建虚拟web主机步骤 2.1.基于域名搭建虚拟主机 ①为虚拟主机提供域名解析 ②为虚拟主机准备网页文档 ③添加虚拟主机配置 ④设置访问路 ...
- HandlerInterceptor与WebRequestInterceptor的异同
相同点 两个接口都可用于Contrller层请求拦截,接口中定义的方法作用也是一样的. //HandlerInterceptor boolean preHandle(HttpServletReques ...
- Emlog V6.0.0代码审计笔记
前言 emlog是一套基于PHP和MySQL的博客及CMS建站系统. emlog v6.0.0存在后台SQL注入漏洞. 分析 官网下载emlog最新版v6.0.0,本地搭建. 前台功能不多,参数基本都 ...
- one_gadget的一些姿势
概要 one_gadget是libc中存在的一些执行execve("/bin/sh", NULL, NULL)的片段,当可以泄露libc地址,并且可以知道libc版本的时候,可以使 ...
- SQL 练习36
查询不同课程成绩相同的学生的学生编号.课程编号.学生成绩 select a.cid, a.sid, a.score from sc as a,sc as b WHERE a.sid = b.sid a ...