Step 1: Planning structure
Generally, the structure is a whole large function module as a parent component, and the small function partition inside is a child component. The following takes the whole shopping cart as the parent component cart, which contains three child components: Cart-header, cart-list and cart-footer. Pink, green and khaki have been written in the following patterns to help distinguish them.
After setting up the basic framework, the three sub-components are first unified on the parent component tree, which is convenient to view the overall effect on the page when writing the style below.
Step 2: Create a template (Write style)
The code looks like this.
Step 3. Implement the function
The functions of the header and tail components are relatively simple. The function of the middle shopping list is slightly more complicated. Because multiple functions require the same data to perform operations and these functions are distributed among different sub-components, the data is uniformly stored in the parent component, and the sub-component obtains the data when it needs it.
Then start writing the first child component, cart-header.
The third child component, cart-Footer, has a function to calculate the total price.
Finally, the second component, cart-List.
First get the item list data from the parent component, CART.
V-for populates the obtained data into the template.
Function realization part the main function to be realized here is actually the change and deletion of the number of goods in the list of goods, whether the minus sign, plus sign or input field are the operation of the number of goods, so these three functions are summarized in an event function changeNum() to reduce the amount of code to improve performance. The first step is to implement the simple delete function itemDel().
Child components are not directly manipulate the parent component data (for the design of the Vue is one-way flow of data, the parent component is a one-to-many, if there are multiple child components props for the parent component of the same data, if one child component operations this data will make all the data of joint, so data can only be in the Vue from the top down flow.) , so all the keystrokes serve as a data transfer function, sending data back to the parent to tell the parent to do something.
Use the ID in the list of goods as an index to achieve the function of the delete button. The id is obtained from the child component and passed to the parent component. The parent component uses the array method splice to delete the commodity data corresponding to the ID after receiving the parameter. The functions of other child components are also implemented in the same way. After the child component sends data to the parent component, the parent component realizes the specific functions uniformly.
The input field function cannot be implemented using the V-Model because the data source is not the data of the child component itself but the data of the parent component passed by the props. Using the blur event, the input field is updated when it loses focus. Again, the child component is only responsible for passing parameters, and the parent component performs the specific operation logic.
The two parameters passed here are the ID of the item to be updated and the new data to be entered in the input field, which is passed using the event object $event.
So we’re passing the data to the parent and all the parent has to do is update the data to the original list by using the array method some() to iterate through the list of items that need to be updated. Note that using some() we need to return true to terminate the iteration. This is the rule for using some, just remember it.
Then it is the realization of the plus and minus function, because both the plus and minus function and the input field function is to change the quantity of goods, so it can be summarized with an event, and then subdivide the function of each part in the event, and add a type attribute when the sub-component passes the parameter as the judgment basis to distinguish the logic.
