Detailed explanation of Vue parent-child component value transfer and slot application steps

This time I will bring you a detailed explanation of the value transfer and slot application steps of the vue parent-child component. What are the precautions for the value transfer and slot application of the vue parent-child component. The following is a practical case, let's take a look.

1. Passing values ​​​​from parent to child components

nbsp;html>


  
  
  
  


  
 
    
    
    
{{total}}
 
    
  
  

2. Passing DOM from parent components to child components

Look at an example first

  
 
    
Qin
  

  

Open the viewer to check

found that Qin is missing

Qin

1

View the official documentation, https://cn.vuejs.org/v2/guide/components-slots.html

We come to the conclusion: if child does not contain a element, any content passed into it will be discarded

We add the slot

  
 
    
Qin
  

  

It was found that Qin can be displayed normally, and the slot will be replaced with the parsed fragment Qin

When the parent component does not respond to the child When the component passes a value, slot can also appear as the default value of the parent component

Rendering

##Named Slot

If you want to use multiple slots, let’s take a look at the effect first:

  
 
    
      
This is header
       
    
  

  

It is found that multiple headers and footers appear. To solve this problem, we need to use named slots

We modify the code as follows:

  
 
    
      
This is header
       
    
  

  

You can see that the display is normal

I believe it After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps to add, delete and modify JavaScript DOM elements

VeeValidate form verification use case in vue project Code analysis

The above is the detailed content of Detailed explanation of Vue parent-child component value transfer and slot application steps. For more information, please follow other related articles on the PHP Chinese website!