Vue.js slot Useful (reprint)

What is a component?

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

Slot Distribution Content

① Overview:

Simply put, if the parent component needs to place some Dom in 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 contents of the parent component within the child component are not displayed.

For example, code:

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

The display is a button that does not contain the contents of the span tag;

③ Single Slot

Simply put, the parent component can be placed in the sub-component's content and placed where it wants to be displayed.

<div id= "App" > <children> <span>12345</span> <!--above this line does not show-</children> </ Div> <script> var vm = new Vue ({el: ' #app ', components: {children: {//This no return value does not continue to distribute the template: "<button>& Lt;slot></slot> Use the button label </button> "}}" to clarify the scope of the action; </script>

For example, the result is:

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

That is, the parent component is placed in the sub-component of the content, inserted into the sub-component <slot></slot> position;

Note that even if there are multiple labels, they will be inserted together, replacing the <slot></slot> tag with the label of the parent component placed in the subassembly.

④ named slot

Place different HTML tags in sub-components in different locations

Parent component Add slot= "name name" attribute to the label to be distributed

The subassembly adds the name= name attribute to the slot label in the location of the corresponding distribution, and then places the corresponding label in the corresponding position.

Example code:

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

The result is: (for easy viewing, line wrapping has been manually adjusted)

<button> <span slot= "First" >12345</span> <span slot= "second" for clarity of scope >56789</span> So use the button tag </button>

⑤ scope of distribution of content:

The scope of the content being distributed, as determined by its template, for example, the above label, which is contained in the parent component's template (although the children tag of its quilt component is included, but because he is not in the child component's template property and therefore does not belong to the child component), is controlled by the parent component.

Example code:

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

The Tobeknow method of the parent component is triggered when the area of text 12345 is clicked (not all buttons).

However, there is no impact when clicking on other areas.

This is what the official tutorial says:

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

⑥ when no content is distributed:

If the parent component does not have a label in the subassembly, or if the parent component places the label in the subassembly, but has a slot attribute, the child component does not have a label for the slot property.

Then, the slot label for the subassembly will not play any role.

Unless there is content within the slot tag, the contents of that slot tag are displayed when no content is distributed.

As the sample code:

<div id= "App" > <children> <span slot= "First" > "12345" </span> <!--above this line does not display--</ children> </div> <script> var vm = new Vue ({el: ' #app ', components: {children: {//This no return value does not continue to distribute the template : "<div><slot name= ' first ' ><button>" Show me 1 if no content "</button></slot> to clear the scope, <slot Name= ' last ' ><button> "Show me 2 if not content" </button></slot> so use the button tag </div> "}}"); </script>

Description

The slot label for "1" name= ' first ' is replaced by the label corresponding to the parent component (the contents inside the slot tag are discarded);

The slot label for "2" name= ' last ', because there is no corresponding content, displays the contents of the slot label inside.

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

"1" first, since the template label belongs to the parent component, it is not possible to bind the directive of the subassembly to the template tag (because he belongs to the parent component);

"2" If the parent component is required to control whether the subassembly is displayed (for example, V-if or v-show), then the directive is clearly part of the parent component (for example, under the data of the parent component). You can write a label on a template on a subassembly.

such as code:

<div id= "App" > <button @click = "Toshow" > Click let subcomponents show </button> <children v-if= "abc" > </children > </div> <script> var vm = new Vue ({el: ' #app ', data: {Abc:false}, methods: {toshow:function () {thi S.ABC =!THIS.ABC; }}, components: {children: {//This no return value, will not continue to distribute the template: "<div> here is a subcomponent </div>"}}); </script>

Description

Controls whether subcomponents are displayed through the parent component (click the button to toggle the value of the V-IF Directive).

"3" If a subassembly is required to control whether a subassembly is displayed (such as to hide it), then the directive is obviously a subcomponent (which places the value under the Data property of the subassembly), so it must be placed in the root tag of the subcomponent, as it is written above.

<div id= "App" > <button @click = "Toshow" > Click let subcomponents show </button> <children> <span slot= "First" > "12345" </span> <!--above this line does not show-</children> </div> <script> var vm = new Vue ({el: ' #app ', methods: {toshow:function () {this. $children [0].tohidden = true;}, the components: {children: {//This no return value does not continue to distribute temp Late: "<div v-if= ' tohidden ' @click = ' tohide ' > here is subcomponent </div>", Data:function () {return {tohidden:true}}, Me Thods: {tohide:function () {This.tohidden =!this.tohidden;}}} } }); </script>

Description

Clicking a subassembly will make the subassembly disappear;

Click the parent component's button to have the child component re-displayed by changing the Tohidden property of the subassembly.

The directives of the child components are bound in the template of the subassembly (so that they can be called);

Vue.js slot Useful (reprint)