正常情况下，子组件应该尽量减少业务逻辑，而应该将业务逻辑放到父组件里面，从而减少耦合，但是当 我们不得不用到这种情况时，可以采用下面的思路

解决方案

  1. 尽量将请求单独作为一个函数（不要将请求放到show()函数里面，show()函数只是负责组建的显示）；

  2. 在进行请求的时候可以加入loading，提高体验；

  3. 当请求完毕以后，再通过this.$emit通知父组件请求完毕；

  4. 父组件这时在通过this.$refs.child.show() 显示子组件，同时隐藏自己；

基于vue，通过父组件触发子组件的请求，等请求完毕以后，显示子组件，同时隐藏父组件的更多相关文章

  1. vue.js中父组件触发子组件中的方法

    知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...

  2. vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法

    (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法”问题疑问,本网通过在网上对“ (vue.js)vue ...

  3. vue-property-decorator和typescript结合构建的class类组件，父组件触发子组件方法的方式

    vue-property-decorator和typescript结合构建的class类组件,父组件触发子组件方法的方式 class类组件示例 Father类组件 <template> & ...

  4. React 父组件触发子组件事件

    Parent组件 import React from "react"; import Child from "./component/Child"; class ...

  5. vue中子组件触发父组件的方法

    网上找了几种方法,下面这两种最实用,最明了 方法一:父组件方法返回是字符串或数组时用这种方法 子组件: <template> <button @click="submit& ...

  6. 基于Vue的数字输入框组件开发

    1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: ...

  7. 基于Vue开发的tab切换组件

    github地址:https://github.com/MengFangui/VueTabSwitch 1.index.html <!DOCTYPE html> <html lang ...

  8. 发布自己第一个npm 组件包（基于Vue的文字跑马灯组件）

    一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HT ...

  9. 使用webpack4搭建一个基于Vue的组件库

    组内负责的几个项目都有一些一样的公共组件,所以就着手搭建了个公共组件开发脚手架,第一次开发 library,所以是参考着 iview 的配置来搭建的.记录如何使用webpack4搭建一个library ...

随机推荐

  1. centos yum 安装 tomcat

    1.安装 yum install tomcat 2.卸载 yum remove tomcat 3.地址映射 http://localhost:8080/ /usr/share/tomcat/webap ...

  2. Oracle数据库与MySQL的不同点

    Oracle笔记 一.   Oracle的启动和登录:  1.启动:通过启动Oracle的服务启动. OracleServiceORCL:核心服务,必须启动. OracleOraDb11g_home1 ...

  3. 2019_7_30python

    当6引号给予变量的时候,变为字符串 6引号注释多行 语言元素 python中大小写敏感 不要和关键字 print( a + b ) print( a - b ) print( a * b ) prin ...

  4. 提升方法(boosting)详解

    提升方法(boosting)详解 提升方法(boosting)是一种常用的统计学习方法,应用广泛且有效.在分类问题中,它通过改变训练样本的权重,学习多个分类器,并将这些分类器进行线性组合,提高分类的性 ...

  5. vue v-for 组件传值 enter传值

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. leetcood学习笔记-108-将有序数组转换为二叉搜索树

    ---恢复内容开始--- 题目描述: 方法一: class Solution(object): def sortedArrayToBST(self, nums): """ ...

  7. NOIp2018集训test-9-7(pm) (联考一day1)

    又被辉神吊打了.今天不仅被辉神李巨吊打,还给基本上给全班垫底了. 看到T3就知道是十进制快速幂,全机房考试的当时应该就我会,结果我tm没找到递推. Orz lyc BM直接水过,Orz wys六个fo ...

  8. sqlserver 获取实例上用户数据库的数据字典

    原理很简单:将获取数据字典信息(通过动态视图获取)存入到目标表(数据字典表)中即可. 本人自用实例 1)创建相关的字典表 use YWMonitor GO SET ANSI_NULLS ON GO S ...

  9. mysql数据库中的索引介绍与优化（转）

    一.什么是索引? 索引用来快速地寻找那些具有特定值的记录,所有MySQL索引都以B-树的形式保存.如果没有索引,执行查询时MySQL必须从第一个记录开始扫描整个表的所有记录,直至找到符合要求的记录.表 ...

  10. iOS报错锦集

    1.Your session has expired. Please log in. 提示“Your session has expired. Please log in.” 解决办法: Xcode ...