Vue 学习笔记：v-for 循环引用组件

@[TOC]

背景

前端开发过程当中，须要动态添加操做面板，而操做面板能够封装成独立的组件，被父组件引用。好比这个添加收货信息的场景，父组件中能够添加多个收货地址：

要实如今父组件中动态添加组件的功能有哪些技术点呢？本文来讨论一下这个简单场景里面的技术要点。

v-for 循环建立子组件

显然，父组件应该使用 v-for 来建立多个子组件，这里父子组件须要进行双向通讯，表现为：

1. 编辑操做，父组件回显信息时，须要传递给子组件收货信息；
2. 父组件的保存操做，须要收集子组件的数据。

因此呢，要用两种组件通讯方式 props 和 $refs。父组件传递给子组件的 props 数据，虽然只能由父组件修改，可是它也是子组件的数据，子组件能够读取、但不能修改；同时，子组件又须要维护本身的数据，便于子组件编辑。

为了达到双向通讯的目的，能够采起的操做以下：

1. 子组件维护本身的数据，但数据的初始化是利用 props 完成的；
2. 父组件使用 v-for 建立子组件时，为每一个组件设置 ref 属性，经过 $refs 获取每一个子组件的数据。

这里有个知识点，值得关注，父组件的 v-for 语句中怎么动态设置子组件的 ref 属性呢？

找到的解决方案是使用字符串的占位符号拼接上 index 来设置，例如，建立 N 个 el-button 子组件，且为每一个组件设置各自的 ref 名称，代码以下：

<el-button 
        :key="index" 
        :ref="`btn${index}`"
         v-for="(btn,index) in btns">
          {{ btn.name}}
    </el-button>
复制代码

v-for 循环建立子组件常见的一个警告是Component lists rendered with v-for should have explicit keys.，因此须要绑定这个属性 :key="index" 。

组件封装

封装原型图中的 Child 标记的组件，命名为 AddressPanel，组件参数有：

参数	说明
address	属性：地址
postCode	属性：邮编
telephone	属性：电话
panelIndex	属性：当前面板的编号，remove 事件时须要
@addPanel	事件：添加一个面板，父组件的 panels 添加一个新记录
@removePanel	事件：删除一个面板，移除父组件的 panels[panelIndex] 处的记录

AddressPanel 组件定义的伪代码：

props: ['address', 'postCode', 'telephone', 'panelIndex'],
data(){
   return {
        data:{ //保证能修改数据，使用 props 属性来初始化数据
            address:address,
            postCode:postCode,
            telephone:telephone
        }
   }
}
复制代码

父组件引用的伪代码：

<div v-for="(panel, index) in panels">
     <address-panel
         :address="panel.address"
         :postCode="panel.postCode"
         :telephone="panel.telephone"
         :panelIndex="index"
         :ref="`panel${index}`"
     </address-panel>
</div>

复制代码

启示录

本文探讨的是父子组件双向通讯的方式，以及 v-for 循环建立子组件时怎么动态设置 ref 属性，都是 Vue 基本的知识点，由于封装一个能够重复动态添加的组件而遇到的问题。

测试动态 ref 时，用了 ElementUI 的在线运行编辑器，多是国外的服务器，也多是家里网络太慢，响应时间非常磨人的。这是今天 Vue 学习的内容，又离入门近了一点！