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、为何不像中介绍的直接传值
直接传值在前期写法中尝试过，那是连请求数据都是在⼦组件中进⾏，所以有很多莫名其妙的 bug，⽐如每次请求数据后会再请求⼀次全部状态的数据，导致显⽰异常，转换思路后在⽗组件请求数据，按 Tab 标签分发对应的数据，这就需要将 Tab 标签的数据传⼊⼦组件的⽅法进⾏处理。
2、⼦组件在⽗组件中进⾏ v-for 循环前，因为 this.$refs.child 还不是数组，所以可以直接点出⼦组件的⽅法，这也是调⽤⼦组件⽅法的实现⽅案。
特殊点的就是⼦组件在⽗组件中进⾏ v-for 循环后， this.$refs.child 会变成⼀个数组，这时候再调⽤⼦组件的⽅法就要带上数组的下标了，这个下标如何来，可以参考这篇随笔第⼆部分的内容。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论