Vue.js thought of component--the next

Vue.js thought of component--the next

One, the communication between components

The scope of the component instance is orphaned, which means that the data of the parent component cannot and should not be referenced directly within the child component's template. However, there is a need for communication between parent and child components, which the child component needs to communicate to the parent component to pass data to the child component.

in Vue.js, the parent-child component's relationship can be summarized as props down, events up. The parent component passes data down through props to the child component, which sends a message to the parent component through events. As shown in the following:

　　

Second, prop-parent component pass data to child component

prop is a custom property that the parent component uses to pass data. Subcomponents need to explicitly declare "prop" with the props option:

Vue.component (' child ', {

//Declaration props

props: [' message '],

//Just like data, prop can be used within the template

//can also be used in VM instances like "This.message"

Template: ' <span>{{message}}</span> '

})

2.1 Simple pass-through values

<! DOCTYPE html>
Operation Result:
  2.2   Parent component to child components, dynamic binding  
 
<! DOCTYPE html>
　　
Operation Result:
Iii. Custom Events
 We know that the parent component is using props to pass data to the subcomponents, but what if the subcomponents are going to pass the data back? That's the custom event! 
Each Vue instance implements the event interface (events interface), which is:

 
  

  
   
 
    
Using $on (EventName) to listen for events
 
    
Triggering events using $emit (eventName)
 
   
 
  
In addition, the parent component can use v-on directly to listen for the events triggered by the subassembly in the same place as the child component.
A simple case helps us to understand:
<! DOCTYPE html>
　　
Operation Result:
Run Result: The subassembly is completely decoupled from the outside. All it does is trigger an internal event that the parent component cares about.
Iv. slot Slots-enabling content distribution

 
   

  
    
 
     
The contents of the parent component template are compiled within the scope of the parent component, and the contents of the child component template are compiled within the scope of the child component
 
    
 
   
 The meaning of the above is that the data defined in the subassembly can only be used in the template of the child component, and the data defined in the parent component can only be used in the parent component's template. If the parent component's data is to be used in a subcomponent, the subassembly definition props is required.
4.1 What is a slot?
Slots, which are meant to be sockets, are designed to make the components more extensible. For example, if the parent component needs to put some Dom in the subassembly, then the DOM is displayed, not displayed, where it is displayed, how it is displayed, and the slot distribution is responsible.
(1) Anonymous Solt
The following example is an anonymous slot that can only represent one slot:
<! DOCTYPE html>
　　
Operation Result:
   in combination with the above examples, we further understand that: for example, we have customized a button component, which is registered as Vbutton in the root component and reused. Then the text on each button must be different, but most of these words do not need to be updated dynamically, then you do not have to use props and other methods from the root component to pass text to the child components, directly with the slot.
(2) real name Solt
 Suppose you have a variety of slots on your computer's motherboard, plugged into a CPU, plugged into a video card, plugged in, and plugged into a hard drive, so let's say there's a component that's computer, and its template is:

 
    

  
     
 
      
<template id= "Computer" >
 
      
<div>
 
      
<slot name= "CPU" > here, plug your cpu</slot>.
 
      
<slot name= "GPU" > Plug in your graphics card here </slot>
 
      
<slot name= "Memory" > here plug in your RAM </slot>
 
      
<slot name= "hard-drive" > here Plug your hard drive </slot>
 
      
</div>
 
      
</template>
 
     
 
    
So, if you want to configure a computer, you can write:

 
    

  
     
 
      
<computer>
 
      
<div slot= "CPU" >intel Core i7</div>
 
      
<div slot= "GPU" >GTX980Ti</div>
 
      
<div slot= "Memory" >kingston 32g</div>
 
      
<div slot= "hard-drive" >samsung SSD 1t</divt>
 
      
</computer>
 
     
 
    
The specific code is as follows:
<! DOCTYPE html>
　　
Operation Result:
Vue.js thought of component--the next