Vue 编程之路(三)—— Vue 中子组件在父组件的 v-for 循环里,父组件如何调取子组件的事件
(标题的解决方案在第二部分)
最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型。
一、前期思路:
其中在“所有订单”页面,UI 给的设计页面如下:
图 1 - 1 UI 设计图.png
UI 理解:每个 Tab 点击后展现的页面都是这样的管理表格,所以这一部分表格写成组件。一开始采用的写法是下面这样的:
图 1 - 2 前期实现.png
写完觉得代码很繁复,我在实现状态标识 + 对应的数量时,也发现上述写法不利于将 label 绑定为动态数值,转换思路和后端老哥沟通后改造了接口,返回数据的时候添加一下各个状态及其对应的数量
二、最终的实现思路:
基于简化代码的思想,决定将这些 tabs 用循环的方式展现出来,写法如下:
图 2 - 1 最终实现.png
图 2 - 2 定义的 tabList .png
因为要显示相应的数量,从接口中拿数据后与 tabList 进行拼接,不过给各位的参考意义不大,处理如下:
图 2 - 3 处理 tabList .png
下图将体现解决方法的核心,那就是带上对应的数组下标:
图 2 - 4 何时调用.png
我采用的逻辑是点击不同的 Tab 标签,携带不同的参数去请求数据,图 2 - 4 显示在返回的数据 order 有变化时,将变化后的 order 传值给子组件的 getOrderList 方法进行处理。这个时候就要解答标题了,因为 tabs 是循环出来的, console.log(this.$refs.child) 将显示类似下图:
图 2 - 5 console.log(this.$refs.child).png
可以看出已经成了一个数组,这时候就需要我们加上下标再去调用相应的 tab 子组件方法,如下图:
图 2 - 6 确定 tabList 的 index.png
三、写在最后
1、为何不像 Vue 编程之路(一)——父子组件之间的数据传递 中介绍的直接传值
直接传值在前期写法中尝试过,那是连请求数据都是在子组件中进行,所以有很多莫名其妙的 bug,比如每次请求数据后会再请求一次全部状态的数据,导致显示异常,转换思路后在父组件请求数据,按 Tab 标签分发对应的数据,这就需要将 Tab 标签的数据传入子组件的方法进行处理。
2、子组件在父组件中进行 v-for 循环前,因为 this.$refs.child 还不是数组,所以可以直接点出子组件的方法,这也是调用子组件方法的实现方案。
特殊点的就是子组件在父组件中进行 v-for 循环后, this.$refs.child 会变成一个数组,这时候再调用子组件的方法就要带上数组的下标了,这个下标如何来,可以参考这篇随笔第二部分的内容。
Vue 编程之路(三)—— Vue 中子组件在父组件的 v-for 循环里,父组件如何调取子组件的事件的更多相关文章
- Vue 编程之路(一)——父子组件之间的数据传递
最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型.其中部分页面是数据管理页,所以有很多可以复用的表格,故引入自定义组件.在这里分享一下开 ...
- Vue源码学习三 ———— Vue构造函数包装
Vue源码学习二 是对Vue的原型对象的包装,最后从Vue的出生文件导出了 Vue这个构造函数 来到 src/core/index.js 代码是: import Vue from './instanc ...
- Vue 编程之路(二)——跳转页面传值
最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型.其中我负责的部分有一项需要跳转页面,由于跳转前的页面是多个组件构成的,所以在跳转页面的 ...
- vue 源码学习三 vue中如何生成虚拟DOM
vm._render 生成虚拟dom 我们知道在挂载过程中, $mount 会调用 vm._update和vm._render 方法,vm._updata是负责把VNode渲染成真正的DOM,vm._ ...
- 三. Vue组件化
1. 认识组件化 1.1 什么是组件化 人面对复杂问题的处理方式 任何一个人处理信息的逻辑能力都是有限的,所以当面对一个非常复杂的问题时我们不太可能一次性搞定一大堆的内容. 但是我们人有一种天生的能力 ...
- Vue学习笔记(三)组件间如何通信传递参数
一:父组件向子组件传递参数 <template > <div id="app"> <h1 v-text="title">&l ...
- vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...
- 从零开始学 Web 之 Vue.js(六)Vue的组件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Vue.js 子组件的异步加载及其生命周期控制
前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...
随机推荐
- jsp页面运行的步骤以及原理
1.jsp页面在服务器端的执行步骤: 1)将jsp页面翻译成java文件 2)编译 java-class 3)执行返回结果(html页面)给客户端. 2.jsp页面运行的原理: jsp在服务器端运行 ...
- 架构风格:你真的懂REST吗?
本文探讨如下几个问题: 什么是REST REST包含哪些约束 什么是RESTful 纯RESTful API的难点在哪里 如果你去搜索「什么是REST」的话,大部分情况下,你看到的基本都是RESTfu ...
- C++ Primer 第8章作业
练习8.1 编写函数,接受一个istream&参数,返回值类型也是istream&. 此函数须从给定流中读取数据,直至遇到文件结束标识时停止.它将读取的数据打印在标准输出上.完成这些操 ...
- java中实现多线程的几种方式(简单实现)
一.以下只是简单的实现多线程 1:继承Thread 2:实现 Runnable 3:实现callable 如果需要返回值使用callable,如果不需要返回最好使用runnable,因为继承只能单继承 ...
- 利用ascii码生成26个英文字母
<script> let a = ""; for (var i = 65; i < 91; i++) { a += String.fromCharCode(i); ...
- XSS攻击 && CSRF攻击 基础理解
一个网站,不管多么的帅气,多么的风骚,如果你不安全,那始终都是一个弟弟啊~ 今天又看了下XSS和CSRF攻击的文章,我也想发点什么普及下大家的安全意识,毕竟作为一名拥有伟大梦想的程序员,基本的安全意识 ...
- mysql8.0新增用户及密码加密规则修改
MySQL8.0已经发布GA版,当前最新GA版本为8.0.12.虽然相对于之前版本,MySQL8.0没有加入新元素,但是,经过代码重构,MySQL8.0的优化器更加强大,同时也有一些新特性,如支持索引 ...
- Win7配置express4环境
本机环境: $ node -v v10.14.1 $ npm -v 6.4.1 配置node环境变量: #配置全局安装目录 npm config set prefix "G:\WEB\nod ...
- Set的源码分析
Set的内部实现其实是一个Map.即HashSet的内部实现是一个HashMap,TreeSet的内部实现是一个TreeMap,LinkedHashSet的内部实现是一个LinkedHashMap. ...
- C# base64 转 byte[]
string转成 Base64 形式的String //byte[] 转string byte[] b = Encoding.Default.GetBytes("字符串"); // ...