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 组件之间互相传值:兄弟组件通信的更多相关文章

  1. EasyDSS RTMP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值

    之前接触最多的都是EasyNVR,主要针对的都是前端的一些问题.也有接触到一些easydss流媒体服务器. 前端方面的,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是 ...

  2. vue学习--组件之间的传值方式

    1.概述 vue由多个组件构成页面,在不同的组件中有不同的联系,组件之间的传值是十分有必要的 2.父子组件之间传值 --props和$emit 父传子:通过props 方法:子组件:props:['m ...

  3. vue项目中的父子组件之间的传值。

    首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...

  4. vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

  5. vue工程利用pubsub-js实现兄弟组件之间的通信

    前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...

  6. VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法

    vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...

  7. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  8. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  9. vue组件之间的传值

    vue中组件之间的传值有好几种情况 1.父向子传值 父组件向子组件传值使用props,直接上实例 city.vue是父组件,list.vue是子组件city.vue里定义cities和hotCitie ...

随机推荐

  1. spring cloud学习笔记三 Feign与Ribbon负载均衡的区别

    一.Feign的介绍 Feign一般比较书面的解释是:Feign是一个声明式的WebService客户端,使用Feign编写的WebService客户端更加简单,他的使用方法是定义一个接口,然后在上线 ...

  2. 两个对象值相同(x.equals(y)==true),hashcode也相同

    不对,如果两个对象x和y满足x.equals(y) == true,它们的哈希码(hash code)应当相同.Java对于eqauls方法和hashCode方法是这样规定的:(1)如果两个对象相同( ...

  3. mongodb 面试题

    mongodb 面试题总结 1 nosql和关系型数据库的区别 NoSQL是非关系型数据库,NoSQL = Not Only SQL. 关系型数据库采用的结构化的数据,NoSQL采用的是键值对的方式存 ...

  4. 【串线篇】Mybatis缓存简介

    缓存:暂时的存储一些数据:加快系统的查询速度... CPU: 主频:4-2.7GHZ 内存:4G-8G    1333MHZ    2166MHZ CPU:一级缓存(4MB):二级缓存 (16MB); ...

  5. BZOJ3038 上帝造题的七分钟

    Time Limit: 3 Sec Memory Limit: 128 MB Description XLk觉得<上帝造题的七分钟>不太过瘾,于是有了第二部. "第一分钟,X说, ...

  6. 使用axios上传文件到阿里云对象文件存储服务器oss

    背景 OSS可用于图片.音视频.日志等海量文件的存储.各种终端设备.Web网站程序.移动应用可以直接向OSS写入或读取数据.OSS支持流式写入和文件写入两种方式.使用阿里云oss做文件存储的时候,不可 ...

  7. Web前端性能优化详解之CSS与JS加载

    浏览器加载页面和渲染过程 加载过程 浏览器根据DNS 服务器得到域名的IP地坛 向这个 IP 的机器发送 HTTP请求 服务器收到,处理并返回 HTTP请求 浏览器得到返回内容 渲染过程 根据 HTM ...

  8. Java数据流学习

    数据流 与机器无关的操作Java基本数据类型.网络传输会用. DataInputStream 数据输入流允许应用程序以与机器无关的方式从底层输入流中读取Java基本数据类型.应用程序可以使用数据输出流 ...

  9. zookeeper,通过python连接找出其对应的hive

    #通过zookpeer找到对应的hive from kazoo.client import KazooClient zkClient = KazooClient(hosts="ip1:218 ...

  10. Vue的跨域设置

    1.在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的. 2.当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{} ...