Vuejs 11th component Slot Content distribution instance detailed _javascript skill

What is a component?

Component (Component) is one of the most powerful features of Vue.js. Components can extend HTML elements and encapsulate reusable code. At a higher level, the component is a custom element, and the Vue.js compiler adds special features to it. In some cases, a component can also be in the form of a native HTML element, which is extended in the IS attribute.

Slot Distributing content

① Overview:

In simple terms, if the parent component needs to put some dom inside the subassembly, then the DOM is displayed, not displayed, where it is displayed, how it is displayed, and the slot distributes the responsible work.

② By default

The content that the parent component sets inside the subassembly is not displayed.

For example, code:

<div id= "App" > 
<children> 
<span>12345</span> 
<!--this line does not show--> 
</children> 
</div> 
<script> 
var vm = new Vue ({ 
el: ' #app ', 
components: { 
Children: {//This no return value, will not continue to distribute 
template: "<button> to clear scope, so use button label </button>" 
} 
}); 

The display is a button and does not contain the contents of the span label;

③ Single Slot

In short, with only this tag, you can put the parent component on the contents of the subassembly and place it where you want it to appear.

<div id= "App" > 
<children> 
<span>12345</span> 
<!--this line does not show--> 
< /children> 
</div> 
<script> 
var vm = new Vue ({ 
el: ' #app ', 
components: { 
Children: {//This no return value, will not continue to distribute 
Template: "<button><slot></slot> in order to clear the scope of action, so use the button label </ Button> "}}} 
); 

For example, if you write this, the result is:

<button><span>12345</span> to clarify scope of action, use button label </button>

The contents of the parent component in the subassembly are inserted into the <slot></slot> position of the subassembly;

Note that even if there are multiple tags, they are inserted together, which is equivalent to the label of the parent component in the subassembly, replacing the <slot></slot> label.

④ named slot

Put different HTML tags in a subassembly in a different location

The parent component adds the slot= name attribute to the label to be distributed

The subassembly adds the name= "name name" attribute to the slot tag in the location where the distribution corresponds, and then the corresponding label is placed in the corresponding position.

Sample code:

<div id= "App" > <children> <span slot= "", "the" " 
>12345</span> 
<span slot=" Second ">56789</span> 
<!--above this line will not show--> 
</children> 
</div> 
<script > 
var vm = new Vue ({ 
el: ' #app ', 
components: { 
children: {//This no return value, will not continue to distribute 
template: "< Button><slot name= ' ></slot> for clear scope, <slot name= ' second ' ></slot> so use button label < /button> "}}} 
); 
</script>

Display results as: (for easy viewing, line wrap has been manually adjusted)

<button>
<span slot= "a" >12345</span>
in order to clarify the scope of action,
<span slot= "Second" > 56789</span>
so use button label
</button>

Scope of ⑤ Distribution:

The scope of the content being distributed, depending on the template in which it is located, for example, the above label is controlled by the parent component in the parent component's template (although it is included in the Children tab of its quilt component, but because it is not part of the child component's template property and therefore does not belong to a subassembly).

Sample code:

<div id= "App" > 
<children> 
<span slot= "a" @click = "Tobeknow" >12345</span> 
<span slot= "Second" >56789</span> 
<!--This line will not show--> 
</children> 
</div> 
<script> 
var vm = new Vue ({ 
el: ' #app ', 
methods: { 
tobeknow:function () 
{ Console.log ("It is the parent's method"); 
} 
, 
components: { 
children: {//This has no return value and will not continue to be distributed 
Template: "<button><slot name= ' ></slot>" for clear scope, <slot name= ' second ' ></slot> So use button tags </button> "}}}" 
; 
</script>

When you click on the area of text 12345 (not all of the buttons), the Tobeknow method of the parent component is triggered.

But clicking on other areas has no effect.

That's what the official tutorials say:

The contents of the parent component template are compiled within the parent component scope; The contents of the child component template are compiled within the child component scope

⑥ when no content is distributed:

If the parent component does not have a label in the subassembly, or the parent component places a label in the subassembly, there is a slot property, and the child component does not have a label for the slot property.

Then, the slot label for the subassembly will not work.

Unless there is content in the slot label, the contents of the slot tag are displayed when the content is not distributed.

such as Sample code:

<div id= "App" > 
<children> 
<span slot= "A" > "12345" </span> 
<!-- The above line does not show--> 
</children> 
</div> 
<script> 
var vm = new Vue ({ 
el: ' #app ', 
components: { 
children: {//This no return value, will not continue to distribute 
template: "<div><slot name= ' a ' ><button > "If no content will show me 1" </button></slot> in order to clarify the scope of action, <slot name= ' last ' ><button> ' if there is no content then show Me 2 "</ button></slot> so use button tags </div> "}}}" 
; 

Description

The slot label of "1" Name= ' A is replaced by the corresponding label of the parent component (the content inside the slot tag is discarded);

"2" name= ' last ' slot label, because there is no corresponding content, then display the content inside the slot tag.

⑦ if you want to control the properties of the child component root tag

"1" First of all, because the template tag belongs to the parent component, it is not possible to bind the instruction of the subassembly to the template label (because he belongs to the parent component);

"2" If you need to control whether a subassembly is displayed (such as V-if or v-show) through a parent component, then this instruction is obviously part of the parent component (for example, under the parent component's data). You can write a label on a template for a child component.

such as code:

<div id= "App" > 
<button @click = "Toshow" > Click let subassembly display </button> 
<children v-if= "abc" > 
</children> 
</div> 
<script> 
var vm = new Vue ({ 
el: ' #app ', 
data: { 
Abc:false 
}, 
methods: { 
toshow:function () { 
this.abc =!this.abc; 
} 
}, 
Components: { 
children: {//This no return value, will not continue to distribute 
Template: "<div> This is a subassembly </div>"}} 
} ); 
</script>

Description

Controls whether the subassembly is displayed through the parent component (click the button, toggle the value of the v-if instruction).

"3" If you need to pass a subassembly, to control whether the subassembly is displayed (for example, let him hide), then the instruction is obviously part of the subassembly (the value is placed under the subassembly's Data property), so it cannot be written as above, but must be placed in the root tag of the subassembly.

<div id= "App" > 
<button @click = "Toshow" > Click to show Subcomponents </button> 
<children> 
<span Slot= "A" > "12345" </span> 
<!--This line will not show--> 
</children> 
</div> 
< Script> 
var vm = new Vue ({ 
el: ' #app ', 
methods: { 
toshow:function () {this 
. $children [0]. Tohidden = true; 
} 
, 
components: { 
children: {//This has no return value, will not continue to distribute 
template: "<div v-if=" Tohidden ' @click = ' tohide ' > here is subassembly </div>, 
data:function () {return 
{ 
tohidden:true 
} 
}, 
methods: { 
tohide:function () { 
This.tohidden =!this.tohidden; 
} 
}}} 
}); 
</script>

Description

Clicking on the subassembly will make the subassembly disappear;

Click on the parent component's button to Tohidden the subassembly by changing the child component's properties.

The instruction of the subassembly is bound in the template of the subassembly (so that it can be invoked);

The above is a small set up to introduce the Vuejs 11th component of the slot content distribution examples, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!