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

解决方案

  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. BigDecimal的操作工具类

    import java.math.BigDecimal; /** * 进行BigDecimal对象的加减乘除,四舍五入等运算的工具类 * @author ameyume * */ public cla ...

  2. Vue双向数据绑定原理深度解析

    首先,什么是双向数据绑定?Vue是三大MVVM框架之一,数据绑定简单来说,就是当数据发生变化时,相应的视图会进行更新,当视图更新时,数据也会跟着变化. 在分析其原理和代码的时候,大家首先了解如下几个j ...

  3. MyBatis中大于和小于号的转义写法

    mybatis 中 SQL 写在mapper.xml文件中,而xml解析 < .>.<=.>= 时会出错,这时应该使用转义写法. 方式一 < <= > > ...

  4. js怎样判断一个数是质数

    1.首先了解什么是质数(即:只能被1和它本身整除的数叫质数)主要代码 /** *判断该数是否为素数 */ function isPrimeNum(num){ ; i < num/+; i++) ...

  5. 使用Fiddler抓取手机包

    配置Fiddler 设置抓取HTTPS包 允许为外部连接 配置移动端 移动端需要能够连接到主机做代理, 设置移动端的网络, 端口为Fiddler的端口, 然后给移动端安装证书, 访问主机名+代理端口号 ...

  6. 关于sublime使用中写less代码高亮显示问题

    一开始在没有配置的情况下在sublime中写less代码是不会有高亮显示的.下面说一下配置过程 一.安装Less2Css模块 打开sublime,ctrl+shift+p,输入package cont ...

  7. jQuery - DOM相关

    1. 操作文本 console.log($("#t1").html()); // 获取span元素中的内容, 包含html标签 $("#t1").html(&q ...

  8. PHP ftp_set_option() 函数

    定义和用法 ftp_set_option() 函数设置 FTP 连接的各种运行时选项. 如果成功,该函数返回 TRUE.如果失败,则返回 FALSE. 语法 ftp_set_option(ftp_co ...

  9. NOIp2018集训test-9-4

    老张让我们2.5h考NOI%你题,喵喵喵? 因为今(我)天(实)的(在)题(太)鬼(弱)畜(了)了,我还只改了t1. Problem A. reorder 考试的时候大家都写了最长不降子序列,然后全员 ...

  10. 【Android】Retrofit网络请求参数注解，@Path、@Query、@QueryMap.

    对Retrofit已经使用了一点时间了,是时候归纳一下各种网络请求的service了. 下面分为GET.POST.DELETE还有PUT的请求,说明@Path.@Query.@QueryMap.@Bo ...