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

解决方案

  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. Switch控制器

    比如目前有qq和百度两个网站,switch可以指定选择一个 Switch value是填写索引值,从0开始.也可以书去请求的名词比如,qq或者百度 填写0就是访问qq 填写1就是访问百度

  2. spring_入门配置和注入

    Spring的获取容器: public static void main(String[] args) { //获取核心容器 BeanFactory延迟加载对象 ApplicationContext ...

  3. centos7 安装KDE

    下载安装了centos7 64位系统之后.初始化安装的是GNOME桌面系统.因为是按照鸟哥的Linux在学习,所以需要安装kde. 首先需要root权限. 打开终端. 输入su root密码.进入ro ...

  4. PL/SQL Developer 查看查询的执行计划

    https://zhuanlan.zhihu.com/p/65771352 通过 PL/SQL Developer 查看查询的执行计划 1 什么是执行计划 执行计划是一条查询语句在 Oracle 中的 ...

  5. 笔记46 Hibernate快速入门（三）

    Hibernate相关概念 一.事物概念 Hibernate的任何对数据有改动的操作,都应该被放在事务里面. hibernate中的事务由s.beginTransaction();开始由s.getTr ...

  6. 笔记33 Spring MVC的高级技术——Spring MVC配置的替代方案

    一.自定义DispatcherServlet配置  AbstractAnnotationConfigDispatcherServletInitializer所完成 的事情其实比看上去要多.在Spitt ...

  7. 在vue中使用Element的message组件

    在vue中使用Element的message组件 在vue文件中使用 this.$message({ message: "提示信息", type: "success&qu ...

  8. Android Studio 安装及汉化

    { https://www.bilibili.com/video/av48649403?from=search&seid=15739157224002905777 Tool: https:// ...

  9. LUOGU P3723 [AH2017/HNOI2017]礼物 (fft)

    传送门 解题思路 首先我们设变化量为\(r\),那么最终的答案就可以写成 : \[ ans=min(\sum\limits_{i=1}^n(a_i-b_i+r)^2) \] \[ ans=min(\s ...

  10. JVM内核-原理、诊断与优化学习笔记（六）：类装载器

    文章目录 class装载验证流程 class装载验证流程 class装载验证流程 -加载 class装载验证流程 -链接 验证 链接 -> 验证 文件格式的验证 元数据验证(class文件简单语 ...