Shulou(Shulou.com)06/03 Report--

This article is to share with you about the use of slot in vue.js. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

How to use vuejs slot: 1, put some DOM;2 in the subcomponents, show or hide DOM through slot, code such as "new Vue ({el:" # app ", data: {}, components: {children: {.}})".

This article operating environment: Windows7 system, vue2.9.6 version, DELL G3 computer.

The use of slot in vuejs

Overview:

If the parent component needs to put some DOM in the child component, then the DOM is shown or hidden, where to display, how to display, need to be responsible for slot distribution.

It is distributed in the following ways:

I am slot content.

New Vue ({el: "# app", data: {}, components: {children: {/ / this no return value, will not continue to dispatch template: "in order to clarify the scope of action, use the button tag"})

The result is that the content in the span tag is not displayed.

Single slot:

I am slot content.

New Vue ({el: "# app", data: {}, components: {children: {/ / this no return value, will not continue to dispatch template: "in order to clarify the scope of action, use the button tag"})

That is, the content of the parent component in the child component is inserted into the child component location; note: even if there are multiple tags, they will be inserted together, which is equivalent to the tag placed in the child component in the parent component, replacing this tag. For example: I am slot content

Test test

I'm a test.

New Vue ({el: "# app", data: {}, components: {children: {/ / this no return value, will not continue to dispatch template: "in order to clarify the scope of action, use the button tag"})

D: named slot: put different html tags in the child component into different locations, the parent component adds the slot= "name name" attribute to the tag to be released, and the child component adds the name= "name name" attribute to the slot tag of the corresponding distribution location, and then the corresponding tag will be placed in the corresponding location. For example: 12345 56789

New Vue ({el: "# app", data: {}, components: {children: {/ / this no return value, will not continue to dispatch template: "use button tags to clarify the scope of action"})

E: the scope of the distribution: the scope of the content being distributed, depending on the module in which it belongs, for example: 12345 56789

New Vue ({el: "# app", data: {}, components: {children: {/ / this no return value Will not continue to distribute template: "use button tags to clarify scope"}, methods: {test: function () {console.log ("I am what first clicks to print") }) clicking on the area of button 12345 (instead of all buttons) triggers the test method of the parent component, and then prints "I am the first click to print". But clicking on other areas has no effect.

F: hint when there is no distribution: if the parent component does not have a tag in the child component, or if the parent component places a tag in the child component, but has the slot attribute, and the child component does not have a tag for the slot attribute. Then the slot tag of the subcomponent will not have any effect. Unless there is content in the slot tag, the content in the slot tag will be displayed when there is no distribution. For example: [12345]

New Vue ({el: "# app", data: {}, components: {children: {/ / this no return value, will not continue to distribute template: "

[no content display 1] in order to clarify the scope of action, [no content display 2], so use the button tag

"}})

If it is changed to: [12345]

New Vue ({el: "# app", data: {}, components: {children: {/ / this no return value, will not continue to distribute template: "

[no content display 1] in order to clarify the scope of action, [no content display 2], so use the button tag

"}})

Description: a, the slot tag of name= "first" is replaced by the corresponding tag of the parent component (the content inside the slot tag is discarded) b, the slot tag of name= "last", because there is no corresponding content, the internal content of the slot tag is displayed. G, if you want to control the attributes of the root tag of the child component [1] first, because the template tag belongs to the parent component, it is not possible to bind the instruction of the child component in the template tag (because it belongs to the parent component) [2] if you need to control whether the child component is displayed (such as v-show or v-if) through the parent component, then this instruction obviously belongs to the parent component You can write the label on the template of the subcomponent. For example: click to let the child component display

New Vue ({el: "# app", data: {abc: false}, methods: {toshow: function () {this.abc =! this.abc;}}, components: {children: {/ / this no return value, template: "

Here are the subcomponents.

"}})

After clicking:

Description: through the parent component (click the button, switch the value of the v-if instruction) to control whether the child component is displayed. [3] if you need to control whether the subcomponent is displayed (such as hidden) through the subcomponent, then this instruction obviously belongs to the subcomponent (the value is placed under the data attribute of the subcomponent), then it must be placed in the root tag of the subcomponent. For example, click to make the sub-component display [12345]

New Vue ({el: "# app", methods: {toshow: function () {this.$children [0] .tohidden = true;}}, components: {children: {/ / this no return value, will not continue to dispatch template: "here are the child components

", data: function () {return {tohidden: true}, methods: {tohide: function () {this.tohidden =! this.tohidden;}})

After clicking "here are the sub-components":

Click "Click to let the child components display":

Description:

Clicking on a subcomponent makes it disappear

Click the button of the parent component to redisplay the child component by changing its tohidden property.

The instructions of the subcomponent are bound in the template of the subcomponent (so that it can be called).

Thank you for reading! This is the end of this article on "what is the use of slot in vue.js?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.