Detailed description of vue. js data transmission and data distribution slot, detailed description of vue. js distribution slot

Detailed description of vue. js data transmission and data distribution slot, detailed description of vue. js distribution slot

I. data transmission between components

1. The parent component obtains the data of the Child component.

* Child components send their own data to the parent

* Vm. $ emit (event name, data );

* V-on :@

Example usage: When the send button is clicked, "111" is changed to "I am the data of the Child component"

<! DOCTYPE html> 
2. The child component obtains the data of the parent component.
Before calling the sub-component:
<Bbb: m = "data"> </bbb>
Sub-components:
props:['m','myMsg']props:{'m':String,'myMsg':Number　　　　　　　　}

<! DOCTYPE html> 

Running result:

Ii. Content Delivery:
Vue. js provides a method to mix the content of the parent component with the template of the Child component itself: slot, used to occupy a location
1. Basic usage
<! DOCTYPE html> 
Running result: the content in the ul tag is not overwritten. If slot is not used, the content in the ul tag will be overwritten.

2. slot name attribute
<! DOCTYPE html> 
Running result: