Vue learning Notes: The V-for loop references components

@[TOC]

background

During front-end development, you need to dynamically add an action panel, which can be encapsulated as a separate component that is referenced by the parent component. For example, in the scenario of adding shipping information, you can add multiple shipping addresses to the parent component:

The V-for loop creates the child components

Obviously, the parent component should use V-for to create multiple child components, where the parent and child components need to communicate in both directions as follows:

1. Edit operation. When the parent component returns information, it needs to transmit the receiving information to the child component.
2. The save operation of the parent component requires the collection of data for the child component.

So, there are two component communication methods: props and $refs. Although the props data passed by the parent component to the child component can only be modified by the parent component, it is also the data of the child component, which can be read but cannot be modified by the child component. At the same time, the child component needs to maintain its own data, which is easy for the child component to edit.

To achieve two-way communication, you can perform the following operations:

1. The child components maintain their own data, but the initialization of the data is utilizedpropsThe finished;
2. Parent component usev-forSet for each component when creating the child componentsrefProperties, by$refsGets data for each child component.

The parent component’s V -for statement dynamically sets the parent component’s ref property.

The solution found was to set index using placeholder concatenation of strings, for example, to create N el-Button child components and set each component to its own ref name, as follows:

    <el-button 
        :key="index" 
        :ref="`btn${index}`"
         v-for="(btn,index) in btns">
          {{ btn.name}}
    </el-button>
Copy the code

A common warning for v-for loops is Component lists rendered with V-for should have explicit keys., so you need to attach this attribute :key=”index”.

Component packaging

The component that encapsulates the Child tag in the prototype diagram, named AddressPanel, has the following component parameters:

Pseudocode for the AddressPanel component definition:

props: ['address'.'postCode'.'telephone'.'panelIndex'].data() {returnAddress :address, postCode:postCode, telephone:telephone}}Copy the code

Pseudocode referenced by the parent component:

<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>

Copy the code

The revelation of

This article discusses the way of bidirectional communication between parent and child components, and how to dynamically set the REF attribute when v-for loop creates child components. These are basic knowledge points of Vue, because of the problems encountered when encapsulating a component that can be added dynamically repeatedly.

When testing dynamic Ref, ElementUI’s online running editor was used, either on a server in a foreign country or on a home network that was slow and the response time was grinding. This is what Vue learned today, and it’s a little closer to getting started!