比如应用场景是弹窗中的组件,想要点弹窗时更新该组件展示对应记录的的值

methods: {
edit (record) {
this.mdl = Object.assign({}, record)
this.fileList = this.mdl.img
if (this.$refs.uploadHelp) {
this.$refs.uploadHelp.setData(this.mdl.img)
}
this.visible = true
},
}

我对做了判断,因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在(官网的解释)

this.$refs获取不到dom的可能原因及方法解决:https://blog.csdn.net/qq_38262910/article/details/85296932

参考:https://www.jianshu.com/p/116146b11494

vue父组件触发子组件方法的更多相关文章

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

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

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

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

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

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

  4. [转] vue父组件触发子组件事件

    1. 父组件中获取子组件方法 $children 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <template>     < ...

  5. 基于vue,通过父组件触发子组件的请求,等请求完毕以后,显示子组件,同时隐藏父组件

    正常情况下,子组件应该尽量减少业务逻辑,而应该将业务逻辑放到父组件里面,从而减少耦合,但是当 我们不得不用到这种情况时,可以采用下面的思路 解决方案 尽量将请求单独作为一个函数(不要将请求放到show ...

  6. vue 父组件与子组件的三生三世

    父组件和子组件相互传值:https://www.cnblogs.com/cxscode/p/11187989.html vue父组件触发子组件方法:https://www.cnblogs.com/cx ...

  7. Vee-validate 父组件获取子组件表单校验结果

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

  8. vue 关于父组件无法触发子组件的事件的解决方法

    一般情况导致无法触发子组件的方法  基本都是由于子组件未渲染完成 就进行了调用,解决方法如下: 1.加定时器  setTimeout(() => { //加定时器原因是,子组件页面未渲染处理就做 ...

  9. Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. GWAS+自然选择:62个样本的GWAS分析,没信号,如何巧妙的发文章

    欢迎来到"bio生物信息"的世界 6天前,BMC Genomics 推了一篇文献"Population history and genetic adaptation of ...

  2. 【翻译】Flink Table Api & SQL — 流概念

    本文翻译自官网:Streaming Concepts  https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/table/st ...

  3. 大数据 -- kafka学习笔记:知识点整理(部分转载)

    一 为什么需要消息系统 1.解耦 允许你独立的扩展或修改两边的处理过程,只要确保它们遵守同样的接口约束. 2.冗余 消息队列把数据进行持久化直到它们已经被完全处理,通过这一方式规避了数据丢失风险.许多 ...

  4. 好用的npm包或者工具

    1.样式 classnames:https://github.com/JedWatson/classnames 2.随机数 uuid:https://github.com/kelektiv/node- ...

  5. Docker Overview

    Docker 是一个用于开发.交付和运行应用的开放平台,Docker 设计用来更快的交付你的应用程序.Docker 可以将你的应用程序和基础设施层隔离,并且还可以将你的基础设施当作程序一样进行管理.D ...

  6. python3.5+tornado学习

    python3.5的安装 python官网下载地址:https://www.python.org/ 自行下载最新版本 下载pip包或者easy_install 后缀为.gz格式 地址:https:// ...

  7. jmeter jtl 文件

    一.获取.jtl文件 使用非 GUI 模式,即命令行模式运行 JMeter .执行完成jmeter后,会生成jtl文件. 1.1. 命令介绍 1)先cmd进入到jmeter的bin文件目录下(这里是 ...

  8. js中常见字符串类型操作方法(2)

    toLowerCase(),toLocalLowerCase(),toUpperCase(),toLocaleUpperCase() var stringValue = "hello wor ...

  9. HTTP: Request中的post和get区别

    * GET和POST之间的主要区别 1.GET是从服务器上获取数据,POST是向服务器传送数据. 2.在客户端, get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段 ...

  10. DRF框架(四)——单整体改(put)、单局部改(patch)、群局部改(patch)

    单整体改   单指的是单独一条数据,整体指这条数据的所有字段都必须传值修改 基于上篇文章的代码修改,序列化层不用变,只修改views.py 1) 单整体改,说明前台要提供修改的数据,那么数据就需要校验 ...