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

解决方案

  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. 从身份证号提取生日并更新到生日字段中的SQL语句

    1:根据身份证号 更新 生日字段 SQL update 学生信息 ,)+,)+,) 2:根据身份证号 更新 性别字段 SQL update 学生信息 set 性别='男' and substring( ...

  2. docker一键部署zookeeper

    version: '3.1' services: zoo1: image: zookeeper:3.4.11 restart: always hostname: zoo1 container_name ...

  3. 【SGU194】Reactor Cooling

    题目大意 给定一个无源无汇的网络,边的容量有上下界限制,试构造一个合理的流量. 题目分析 求无源汇上下界的可行流模板题. ①增加一个附加源和汇\(S,T\). ②把每个节点的\(\sum b_{u,i ...

  4. thinkphp 表单合法性检测

    在处理表单提交的数据的时候,建议尽量采用Think\Model类提供的create方法首先进行数据创建,然后再写入数据库. 大理石平台厂家 create方法在创建数据的同时,可以进行更为安全的处理操作 ...

  5. NX二次开发-UFUN删除链表函数UF_MODL_delete_list

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_obj.h> #include <u ...

  6. 强大的pdf文件操作小工具——PDFtk的小白用法 【转载】

    转载出处https://www.cnblogs.com/basterdaidai/p/6204518.html 前言 作为程序员,大家都知道的,总是会被技术小白问各种跟编程没什么关系的硬件.软件问题. ...

  7. c++ 实现元组 重载cout os 输出

    #include <iostream> #include <string> using namespace std; class CAnyType //: public COb ...

  8. 基于Netty的RPC架构学习笔记（二）：netty服务器

    文章目录 简介 Netty服务端Hello World案例 举个

  9. 7、postman的变量

    环境变量 环境变量顾名思义,我们可以设置测试环境和生产环境的变量. 比如我们设置测试环境的某个变量值为A,但是生产环境的为B,这个时候就可以用到环境变量.当然我们也可以不用环境变量,直接手动改,不过试 ...

  10. python简介与安装

    Python简介和环境搭建 于 20世纪80年代末,Guido van Rossum发明了Python,初衷据说是为了打发圣诞节的无趣.1991年首次发布,是ABC语言的继承,同时也是一种脚本语言.取 ...