vue 组件之间互相传值:兄弟组件通信
vue 组件之间互相传值:兄弟组件通信
我们在项目中经常会遇到兄弟组件通信的情况。在大型项目中我们可以通过引入 vuex 轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入 vuex。有几种方法:
方法一:先子传父,再父传子
思路:子传父:首先我们在 a.vue 组件中 ,给按钮 botton 绑定一个 handleClick 事件,事件中我们通过 this.$emit() 方法去触发一个自定义事件,并传递我们的参数。示例中我们通过 this.$emit() 去触发 isLogFn 这个方法自定义事件,并将 log 参数传递出去。我们要在父组件中去监听这个自定义事件,去触发对应的方法,并接受 a 组件传过来的参数。此时我们就完成了子组件向父组件传值的过程。然后 b 组件中需要创建 props,定义一个 isLog 属性,这个属性就是我们传过来的数值。然后我们在计算属性中处理这个数据,最终供 b 组件使用。示例中,我们在 v-show=”isLogin” 中用来控制弹窗是否打开。
a.vue 子组件

app.vue 父组件

b.vue 子组件

本方法文章转子网络,如有侵权联系删除
谢谢支持我是涵酱!

vue 组件之间互相传值:兄弟组件通信的更多相关文章
- EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...
- vue学习--组件之间的传值方式
1.概述 vue由多个组件构成页面,在不同的组件中有不同的联系,组件之间的传值是十分有必要的 2.父子组件之间传值 --props和$emit 父传子:通过props 方法:子组件:props:['m ...
- vue项目中的父子组件之间的传值。
首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...
- vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
- vue工程利用pubsub-js实现兄弟组件之间的通信
前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...
- VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法
vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
- vue组件之间的传值
vue中组件之间的传值有好几种情况 1.父向子传值 父组件向子组件传值使用props,直接上实例 city.vue是父组件,list.vue是子组件city.vue里定义cities和hotCitie ...
随机推荐
- fork/join并发编程
Fork & Join 的具体含义 Fork 一词的原始含义是吃饭用的叉子,也有分叉的意思.在Linux 平台中,函数 fork()用来创建子进程,使得系统进程可以多一个执行分支.在 Java ...
- BZOJ3514 Codechef MARCH14 GERALD07加强版 LCT维护最大生成树 主席树
题面 考虑没有询问,直接给你一个图问联通块怎么做. 并查集是吧. 现在想要动态地做,那么应该要用LCT. 考虑新加进来一条边,想要让它能够减少一个联通块的条件就是现在边的两个端点还没有联通. 如果联通 ...
- ajax使用jsonp请求方式
/* //简写形式,效果相同 $.getJSON("http://app.example.com/base/json.do?sid=1494&busiId=101&jsonp ...
- vue中路由传参的方式
一.params的类型: 配置路由格式: /router/:id 传递的方式: 在path后面跟上对应的值 传递后形成的路径: /router/123, /router/abc 通过:to字符串拼接的 ...
- ldd3 编写scull尝试
快速参考: #include <linux/types.h> dev_t dev_t is the type used to represent device numbers within ...
- 【CF1210D】Konrad and Company Evaluation(vector,图论)
题意:有i个人,m对两两之间的关系,第i个人初始的薪水为i,有q次操作,第i次操作会把v[i]号的薪水提升成n+i 如果两个人之间存在关系,薪水高的会向薪水低的炫耀 定义u,v,w为一个三元组,当u向 ...
- txt操作
C#解决读写包含汉字的txt文件时乱码的问题 C#解决读写包含汉字的txt文件时乱码的问题 当我们用System.IO.StreamReader读取包含汉字的txt文件时,经常会读出乱码(Stream ...
- 从Java future 到 Guava ListenableFuture实现异步调用
从Java future 到 Guava ListenableFuture实现异步调用 置顶 2016年04月24日 09:11:14 皮斯特劳沃 阅读数:17570 标签: java异步调用线程非阻 ...
- 王爽《汇编》检测9.1(1) | 若要使程序中的jmp指令执行后,CS:IP指向程序的第一条指令,在data段中应该定义哪些数据?
;监测点9.1(1) assume cs:code data segment db dup() data ends code segment start: mov ax,data :这一段一定要补上 ...
- vue搭配的UI框架 pc端 + 移动端
PC桌面端UI框架: 1,iview (最新,用户评分高功能多炫酷 解决和避免了其他UI框架出现的一些小问题) 2, bootstrap (使用用户最多样式死板没特色) 3,Element ...