I read the official document before, but due to my own understanding, I didn’t know what slot is for. When I saw the subtitle and used Slot to distribute the content, I thought I wanted to distribute the content down. Then I didn't understand the concept of slots. In fact, to put it bluntly, using slot means first to enclose a piece of land. In the future, it may be possible to grow flowers and vegetables, or to build a house on this piece of land. However, slot can be used as one to ten, and can insert a lot of things. Don't know if you understand?
Due to limited project experience, I will follow the knowledge points of the official website first in this article, and of course I will add some of my project codes.
That's what slot says,
Unless the child component template contains at least one <slot> socket, the contents of the parent component will be discarded. When the child component template has only one slot without attributes, the entire content fragment of the parent component is inserted into the DOM position where the slot is located and replaces the slot tag itself.
Any content originally in the <slot> tag is considered alternate content. The alternate content is compiled within the scope of the child component and is displayed only if the host element is empty and there is no content to be inserted.
Single Slot
Using a special <slot> element in the child component can add a slot (slot) to this child component. In the parent component template, inserting all contents in the child component tag will replace the child component's <slot> tag and its content. The example code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<div >
<child-component>
<p>Distributed content</p>
<p>更多Distributed content</p>
</child-component>
</div>
<script src="/vue/dist/"></script>
<script>
('child-component', {
template: '\
<div>\
<slot>\
<p>If the parent component does not use insert content, I will appear as default</p>\
</slot>\
</div>'
});
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>
A <slot> element is defined in the template of the child component child-component, and a <p> is used as the default content. When the parent component does not use slot, the default text will be rendered; if slot is written, the entire <slot> will be replaced. Therefore, the result after rendering of the above column is:
<div >
<div>
<p>Distributed content</p>
<p>更多Distributed content</p>
</div>
</div>
Note: The alternate content within the subcomponent <slot> is its scope when the subcomponent itself.
Named Slot
After assigning a name to the <slot> element, multiple content can be distributed. A named Slot can coexist with a single Slot, such as the following example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<body>
<div >
<child-component>
<h2 slot="header">title</h2>
<p>Content of the text</p>
<p>更多Content of the text</p>
<div slot="footer">Bottom information</div>
</child-component>
</div>
<script src="/vue/dist/"></script>
<script>
('child-component', {
template: '\
<div class="component">\
<div class="header">\
<slot name="header"></slot>\
</div>\
<div class="main">\
<slot></slot>\
</div>\
<div class="footer">\
<slot name="footer"></slot>\
</div>\
</div>'
});
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>
Three <slot> elements are declared in the child component, among which the <slot> in <div class="main"> does not use the name attribute, it will appear as the default slot, and the elements and contents of the parent component that do not use the slot attribute will appear here.
If the default anonymous slot is not specified, all unnecessary fragments of content in the parent component will be discarded.
The final rendering result of the above example is:
<div >
<div class="container">
<div class="header">
<h2>title</h2>
</div>
<div class="main">
<p>Content of the text</p>
<p>更多的Content of the text</p>
</div>
<div class="footer">
<div>Bottom information</div>
</div>
</div>
</div>
The content distribution API is crucial when using components in combination.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.