父子组件通信

父 通过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. 为链表数据结构实现iterator接口

    iterator作用 为所有的数据结构提供统一的访问方式. 接口对象 接口对象一共有3个方法,next()方法.return()方法.throw()方法. next() 必填 用于for..of迭代. ...

  2. K8S 部署 ingress-nginx (三) 启用 https

    部署 https 证书 cd ~/ingress # 生成私钥 tls.key, 密钥位数是 2048 openssl genrsa -out tls.key 2048 # 使用 tls.key 生成 ...

  3. CSS概念【记录】

    1.CSS语法 2.@规则 3.注释 4.层叠 5.优先级 6.继承 7.值 8.块格式化上下文 9.盒模型 10.层叠上下文 11.可替换元素 12.外边距合并 13.包含块 14.视觉格式化模型 ...

  4. 洛谷P3388 【模板】割点(割顶)(tarjan求割点)

    题目背景 割点 题目描述 给出一个n个点,m条边的无向图,求图的割点. 输入输出格式 输入格式: 第一行输入n,m 下面m行每行输入x,y表示x到y有一条边 输出格式: 第一行输出割点个数 第二行按照 ...

  5. 洛谷P4588 [TJOI2018]数学计算(线段树)

    题意 题目链接 Sol TJOI怎么全是板子题 对时间开个线段树,然后就随便做了.... #include<bits/stdc++.h> using namespace std; cons ...

  6. Django之URL路由系统

    一 URL配置 Django 1.11版本 URLConf官方文档 URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表.你就是以这 ...

  7. 区块链:创建简单的HelloWorld-WebDApp

    Node.js 一个建立在Chrome的JavaScript运行环境上的平台,用以容易地建立快速而可扩展的网络应用:下载地址:https://nodejs.org/en/ Turffle 以太坊(Et ...

  8. leetcode-217存在重复元素

    leetcode-217存在重复元素 题意 给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 示例 1: ...

  9. java传输文件的简单方法

    假设现在已经打包了一个文件(1233444333),要将这个文件传输给另一方: package file; import java.io.*; public class F_PasswordUnPas ...

  10. Python lambda介绍

    转自:http://www.cnblogs.com/evening/archive/2010/03/29/2423554.html Python lambda 介绍   在学习python的过程中,l ...