情景:

  父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块.

  父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部.

  

  父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块:

  

  设想思路:点击父组件中的按钮触发子组件中上传方法:

  子组件上定义ref="refName",父组件的方法中用this.$refs.refName.method去调用子组件方法

  子组件中处理上传的方法:  

 fileClick(index) {
console.log('子组件的fileClick被调用了')
console.log('index: '+index)
// this.aaa();
if(!this.fileInfor[index].imgUrl){
//如果当前框里没有图片,则实现上传
document.getElementsByClassName('upload_file')[index].click();
}
},

  父组件template

<template>
<x-button type="submit" class="custom-primary" @click.native="xiechengUpload">上传图片</x-button> <up-load :fileInformation="fileInformation" ref="uploadRef"></up-load>
</template>

  父组件method中定义方法,同时传入相应的index值.

Upload(){
// console.log('父组件的xiechengUpload被调用了')
this.$refs.uploadRef.fileClick(0);
},

此时就可以通过上传按钮将图片放到子组件的第一个模块中了.

vue 父组件调用子组件方法的更多相关文章

  1. Vue 父组件调用子组件的方法

    qwq  前两天看了下vue,父子组件方法的调用,怕忘记,所以做个小记录. 一.父组件调用子组件的方法 1.父组件 <template> <div id="rightmen ...

  2. vue+element ui项目总结点(四)零散细节概念巩固如vue父组件调用子组件的方法、拷贝数据、数组置空问题 等

    vue config下面的index.js配置host: '0.0.0.0',共享ip (假设你的电脑启动了这个服务我电脑一样可以启动)-------------------------------- ...

  3. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  4. vue:父子组件间通信,父组件调用子组件方法进行校验子组件的表单

    参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...

  5. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  6. vue 父组件调用子组件内置方法

    背景介绍:外派到泰康做项目.这个项目中有个选择组织的功能,是一个树桩结构的懒加载,于是我就element-ui的tree组件封装了一个公共的组件. 但是后来发现他们的公司组织结构不是都请求的同一个接口 ...

  7. Vue3 父组件调用子组件的方法

    Vue3 父组件调用子组件的方法 // 父组件 <template> <div> 父页面 <son-com ref="sonRef"/> < ...

  8. react 父组件调用子组件方法

    import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...

  9. React 父组件调用子组件的方法

    父组件调用子组件的方法 React v16.3.0 及以后版本使用 import React, {Component} from 'react'; export default class Paren ...

  10. reactjs--父组件调用子组件的内部方法(转载)

    reactjs--父组件调用子组件的内部方法 发表于2016/10/11 9:21:37  965人阅读 1.引入相关js <script src="js/react.js" ...

随机推荐

  1. usb帧格式

    源: usb帧格式

  2. Caused by: java.net.BindException: Address already in use: bind

    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'brandService ...

  3. Linux下php添加memcache扩展

    很多时候我们都会遇到在已经安装的php中添加其它的扩展. 那我们应该怎么做呢? 这样做.(我们的nginx和php都是已经安装好了的,这里就不做赘述了) 首先,我们需要下载php的memcache扩展 ...

  4. K8S学习笔记之二进制的方式创建一个Kubernetes集群

    0x00 单节点搭建和简述 minikube Minikube是一个工具,可以在本地快速运行一个单点的Kubernetes,尝试Kubernetes或日常开发的用户使用.不能用于生产环境. 官方地址: ...

  5. php 阳历转农历优化版

    网上转换方法很多例子错误. 测试例子1:输入公历 2010年2月1号测试,对比百度万年历 农历应该为己丑年(2009)腊月(12月)十八. 测试例子2:输入农历1990.11.初十,丑时,公历应该为1 ...

  6. Mysql报错java.sql.SQLException:null,message from server:"Host '27,45,38,132' is not allowed to connect

    Mysql报错java.sql.SQLException:null,message from server:"Host '27,45,38,132' is not allowed to co ...

  7. Java axis2.jar包详解及缺少jar包错误分析

    Java  axis2.jar包详解及缺少jar包错误分析 一.最小开发jar集 axis2 开发最小jar包集: activation-1.1.jar axiom-api-1.2.13.jar ax ...

  8. 标准库 time

    go语言的time包 1. 组成 time.Duration(时长,耗时) time.Time(时间点)time.C(放时间点的管道)[ Time.C:=make(chan time.Time) ]t ...

  9. 使用 select 实现 goroutine 超时

    虽然携程是Go语言中一个新的概念,嗯,但它本质上依然是属于多线程.超时机制是多线程中是一个非常重要的保障程序的鲁棒性的一个措施:错误是很难预估的,在多线程中更为显著,更容易出现难以预料的错误. 一个异 ...

  10. 02:MongoDB操作

    1.1 MongoDB 增加 1.插入数据 1. 插入文档: insert 如果插入数据的时候,collection还不存在,自动创建集合 2. insertOne: 插入一条数据 3. insert ...