父子组件通信

父 通过props属性给 子传递数据

子 操作 父  this.$parent.XXX

子通过$emit传递参数

或者通过vue-bus

vue-bus既可以实现父子组件之间的通信,也可以实现兄弟组件之间的通信

vue-bus安装

(c)npm install vue-bus

引入

import Vue from 'vue';
import VueBus from 'vue-bus'; Vue.use(VueBus);

应用:

发送:
this.$bus.$emit('closeMenu', {});
接收:
this.$bus.on("closeMenu", () => {
this.isOpen = false;
});

参考链接:

【vue】vue +element 搭建项目,组件之间通信的更多相关文章

  1. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  2. vue组件之间通信传值

    原文链接:https://blog.csdn.net/lander_xiong/article/details/79018737 我认为这位博主的这篇文章写的非常详细,通俗易懂, 我们这次的vue项目 ...

  3. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  4. 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些

    VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...

  5. Vue 组件之间通信 All in One

    Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...

  6. vue组件之间通信总结(超详细)

    组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attr ...

  7. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

  8. Vue2.0组件之间通信(转载)

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  9. Vue2.0组件之间通信

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  10. React生命周期, 兄弟组件之间通信

    1.一个demo(https://www.reactjscn.com/docs/state-and-lifecycle.html) class Clock extends React.Componen ...

随机推荐

  1. PNG,GIF,JPG的区别及如何选

    GIF: 1:256色 2: 无损,编辑 保存时候,不会损失. 3:支持简单动画. 4:支持boolean透明,也就是要么完全透明,要么不透明 JPEG: 1:millions of colors 2 ...

  2. 【软工神话】第五篇(Beta收官)

    前言:这应该是最后一章了,故事虽然到这就结束了,但现实里还要继续下去,希望在很久的以后来回顾时,能因自己学生时代有这样的经历而欣慰. 说明:故事中的人物均是化名,故事情节经过些许加工,故事情节并没有针 ...

  3. MySQL服务无法启动 3534

    1.环境变量配置完成 2.配置文件编辑完成 3.启动服务(启动不成功,错误信息“MySQL服务无法启动 请键入 NET HELPMSG 3534 以便获得更多的帮助”) 错误原因:mysql安装目录下 ...

  4. sdk manager闪退

    ,1确认好sdk环境变量是否都正确 命令行:android 来验证 2确定jdk是否安装正确 命令行:java   和  javac 都没有问题,就将sdk安装版覆盖安装下不要卸载,不然下载的太慢了 ...

  5. WPF控件库:图片按钮的封装

    需求:很多时候界面上的按钮都需要被贴上图片,一般来说: 1.按钮处于正常状态,按钮具有背景图A 2.鼠标移至按钮上方状态,按钮具有背景图B 3.鼠标点击按钮状态,按钮具有背景图C 4.按钮处于不可用状 ...

  6. 章节七、2-Linked List

    package introduction9; import java.util.ArrayList; import java.util.LinkedList; import java.util.Lis ...

  7. javascript的隐式类型转换

    首先简单了解js的typeof,会返回六种类型 即 number string boolen function object undefined 也就是六种基本数据类型 显示类型转换大概有以下几种: ...

  8. Visual Studio Team Services Demo Generator简介

    Visual Studio Team Services Demo Generator简介 Visual Studio Team Services Demo Generator能够帮助我们在Visual ...

  9. mysql练习----More JOIN operations

    This tutorial introduces the notion of a join. The database consists of three tables movie , actor a ...

  10. 磁盘测试工具FIO工具安装和使用方法

    一.FIO工具安装: 1.查看fio是否安装 [root@localhost /]#rpm –qa|grep fio 2.源码安装(推荐) 官网地址:http://freecode.com/proje ...