如果子组件是一个弹出框，只有在触发某个点击事件时弹出框才能出现（也就是说在父组件中的子组件使用上用了v-if），那在父组件上如果不点击弹出框是不能获取到$ref的。

原因就是：引用指向的是子组件创建的实例，可以理解为绑在了DOM结构上
那如果我偏偏想调用的是这个子组件（弹出框）中的方法，但又不想要弹出框显示，怎么办呢？
解决方法：把v-if换成v-show，这样DOM元素会一直存在于父组件中，子组件的方法也就能调用了

Vue父组件如何调用子组件（弹出框）中的方法的问题的更多相关文章

  1. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  2. vue父组件如何调用子组件的属性或方法

    常常我们需要组件的拆分,就涉及到父子调用的关系,那么父组件如何调用子组件的属性和方法呢? 子组件child <template> <div> {{msg}} </div& ...

  3. 苹果手机iOS11中fixed弹出框中input光标错位问题

    最近遇到了一个移动前端的BUG:手机弹出框中的输入框focus时光标可能会错位. 刚开始时我完全不知道错误原因是什么,在电脑上调试时完全没有问题,手机上出现问题时也没有找到规律.后来在网上搜索了大量的 ...

  4. 在IOS11中position:fixed弹出框中的input出现光标错位的问题

    问题出现的背景: 在IOS11中position:fixed弹出框中的input出现光标错位的问题 解决方案 一.设计交互方面最好不要让弹窗中出现input输入框: 二.前端处理此兼容性的方案思路: ...

  5. 弹出框中选项卡的运用（easyUI）

    先看一下页面效果: 此处有两个知识点:一个是弹出框的运用,一个是选项卡的运用 分析一下该HTML代码,最外面一个div是弹出框的,默认是关闭状态,可通过ID来控制弹出框的开关,该div的样式是easy ...

  6. 弹出框中的AJAX分页

    $(function() { $("body").on("click",".set-topic",function(){ /*获取所有题目接 ...

  7. [ vue ] Quasar封装q-dialog组件，在外层实现弹出框的开启和关闭

    场景描述: 见:https://www.cnblogs.com/remly/p/12981582.html 具体实现: <!-- 父组件 --> <template> < ...

  8. python + selenium webdriver 通过python来模拟鼠标、键盘操作，来解决SWFFileUpload调用系统底层弹出框无法定位问题

    Webdriver是基于浏览器操作的,当页面上传文件使用的是flash的控件SWFFileUpload调用的时候,调用的是系统底层的文件选择弹出框 这种情况,Webdriver暂时是不支持除页面外的其 ...

  9. vue在element-ui的dialog弹出框中加入百度地图

    参考:https://blog.csdn.net/u012724595/article/details/82703579 <!-- gps弹窗 --> <el-dialog v-di ...

随机推荐

  1. 【转载】ArrayList使用LastIndexOf方法查找最后一个符合条件的元素位置

    在C#的编程开发中,ArrayList集合是一个常用的非泛型类集合,在ArrayList集合中如果需要查找最后一个符合条件的元素所在的位置,可以使用ArrayList集合的LastIndexOf方法, ...

  2. echarts 更改tooltip提示框CSS样式

    最近 做项目,用过echarts,发现tooltip提示z-index级别很高,想更改下,看了下文档:https://www.echartsjs.com/zh/option.html#tooltip. ...

  3. android studio学习----通过gradle来导入jar包

    转载地址:http://www.th7.cn/Program/Android/201507/495477.shtml File->Project Structure 可以打开下面的图: 1.通过 ...

  4. ECharts学习指南

    1.了解ECharts ECharts简单说就是互联网开发程序过程中,后台数据库用以实现数据到图形的映射的一个插件. 具体来说一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在PC和 ...

  5. JavaWeb Listener之HttpSessionBindListener

    HttpSessionBindListener        监听把自身这个对象绑定到HttpSession对象上.解绑 绑定到HttpSession对象上,其实就是调用session的setAttr ...

  6. angular6 使用daterangepicker的注意事项

    具体使用方法可参考这篇博客:https://blog.csdn.net/qq_43225030/article/details/84973086 需要注意的地方是,在dateRangePicker函数 ...

  7. 【Spring Cloud】Spring Cloud之自定义@SpringCloudProfile注解实现@Profile注解的功能

    一.为什么会想到定义@SpringCloudProfile这样的注解 首页提一下@Profile注解:它主要用与Spring Boot多环境配置中,指定某个类只在指定环境中生效,比如swagger的配 ...

  8. PCI_PCIe_miniPCIe规格说明

    PCI PCI是一种本地总线(并行),规格书名称:PCI Local Bus Specification.并行总线,插槽规格统一. PCI stands for Peripheral Componen ...

  9. ubuntu无法连接网络

    一,先说一下VMware软件和linux镜像的版本: VMware Workstation 14 Pro ubuntu-14.04.6-desktop-amd64.iso 二,遇到的问题 在第一次安装 ...

  10. HDU6706 huntian oy(2019年CCPC网络赛+杜教筛)

    目录 题目链接 思路 代码 题目链接 传送门 思路 看到这题还比较懵逼,然后机房大佬板子里面刚好有这个公式\(gcd(a^n-b^n,a^m-b^m)=a^{gcd(n,m)}-b^{gcd(n,m) ...