通过ref去接收值!!!

需求图片

代码实现

 //----------父组件
<div class="fingerprint-bottom">
<el-tabs v-model="activeName">
<el-tab-pane v-for="(item,index) in optionS" :key="index" :label="item.label" :name="item.name">
<EditAssetTab :ref="item.type" type="item.type" :edit-asset-data="editAssetData" :active-name="item.name" />
</el-tab-pane>
</el-tabs>
</div>

// 提交按钮
   submitAsset() {
      // 调用子组件的获取数据方法
      const refsMap = ['a', 'b', 'c', 'd', 'e', 'f'];
      refsMap.map(item => {
        this.originData = { ...this.originData, ...this.$refs[item].getAllQuery() };
      });
// ------子组件

//获取组件所有参数
getAllQuery() {
if (this.type === 'a') { // a->为父组件的ref的值
return {
ip_type: this.ip_type, // IP类型
ip_nat: this.ip_nat, // 映射IP
};
............

  

vue组件 子组件没有事件怎么 向父组件传递数据的更多相关文章

  1. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  2. Vue 父组件向子组件传值,传方法,传父组件整体

    父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3 ...

  3. 屏蔽响应事件继续向父视图传递的category

    屏蔽响应事件继续向父视图传递的category 这篇教程是上一篇教程的升级版,将复杂的代码封装成了category,更便于使用:) 效果: 源码: UIGestureRecognizer+EnvetI ...

  4. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  5. Vue子页面给父页面传递数据

    子页面: <template> <div> <p>子组件</p> <button @click="sendMsg">传递 ...

  6. Winform中如何实现父窗体传递数据到子窗体并刷新子窗体

    原理:利用委托和事件,本文将以图文并茂的例子讲述,告诉我们So Easy --------------------------------------------------------------- ...

  7. cocos2d JS 自定义事件分发器(接收与传递数据) eventManager

    简而言之,它不是由系统自动触发,而是人为的干涉 较多情况用于传递数据 var _listener1 = cc.EventListener.create({ event: cc.EventListene ...

  8. layui之弹出层--从父窗口传递数据到子窗口

    原文链接:https://blog.csdn.net/Code_shadow/article/details/80524633 var Index = layer.open({ title: &quo ...

  9. vue.js事件传值之子组件传向父组件以及$emit的使用

    在项目开发中,有时候会遇到一种需求比如是:在子组件中,通过一个事件,比如点击事件,去改变父组件中的某个值,下面来看看是怎么个流程 还是先截图目录结构 父组件为app.vue,components中的文 ...

  10. vue通信之子父组件通信

    子父组件通信: 创建一个父组件 Home , 创建一个子组件 Head Home 组件: import Head from "./Head.vue" // 引入 Head 组件 c ...

随机推荐

  1. SpringCloudEureka上篇

    SpringCloudEureka上篇 本文学习自<<重新定义SpringCloud>> Eureka简介 Eureka是Netflix公司开源的一款服务发现组件,该组件提供的 ...

  2. Raid磁盘阵列更换磁盘时另一块盘离线恢复案例(v7000存储数据恢复)

    Raid磁盘阵列更换磁盘时另一块盘离线恢复案例(v7000存储数据恢复) [故障描述]客户设备型号为IBM V7000存储,架构为AIX+oracle+V7000存储阵列柜,需要恢复的数据主要存放在阵 ...

  3. oracle ebs 账户组合验证

    DECLARE l_segment1 GL_CODE_COMBINATIONS.SEGMENT1%TYPE; l_segment2 GL_CODE_COMBINATIONS.SEGMENT2%TYPE ...

  4. 微信小程序搜索排名权重!

    最后,再介绍一下排名权重的计算比例: 1.小程序上线时间(占比5%) 2.描述中完全匹配出现关键词次数越多,排名越靠前(10%) 3.标题中关键词出现1次,且整体标题的字数越短,排名越靠前(35%) ...

  5. jmeter分布式压测配置

    首选 压力机A,压力机B,压力机C,   压力机A作为控制台    压力机B,压力机C作为分布式的测试机 压力机Aip:172.16.23.69, 压力机Bip:192.168.184.128 压力机 ...

  6. windows下运行.sh文件

    1.安装git,配置git环境(D:\Tools\Git\cmd) .cmd命令检查是否安装成功(git --version). 2.打开Git Bash窗口,命令运行.sh文件. 3.运行.sh文件 ...

  7. jeecgboot <j-popup

    <a-col :span="24"> <a-form-item label=" 规格" :labelCol="labelCol&qu ...

  8. Ubuntu16.04设置root以及root用户自动登录

    自己之前做的笔记确实不是很详细.因为像是一些环境的配置,即使是这样做,但是自己大概率下是不知道这样做的原因,所以很多东西能不能弄好是有很大的运气成分在里面.所以就很需要记录下自己到底干了些什么. 所以 ...

  9. 【STM32】SYSCLK配置|学习笔记

    一.RCC原理 所有stm32的外设都是挂载在相应的时钟上的,如下 挂载在AHB上的外设 挂载在APB1上的 APB2上的 所以RCC很重要,特别像TIM这种对时钟特别敏感的外设就必须把SYSCLK确 ...

  10. 个人常用的win7快捷键

    1.Win + D – 显示桌面 2.Win+L    锁定系统 3.Win + R – 打开运行窗口 4.Win+M     最小化所有窗口      当按下后当前所有窗口全都最小化.再次按下这个组 ...