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

This article mainly explains "how to use Vue slot". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the idea of Xiaobian and go deep into it slowly to study and learn "how to use Vue slot" together.

Single Slot

A slot can be added to a subassembly by using a special element within the subassembly. In the parent component template, everything inserted into the subassembly tag replaces the subassembly tag and its contents. The sample code is:

subassembly

I will appear as default if the parent component has nothing to insert

export default {

name: "sonSlot",

}

parent component

the content distributed

More distributed content

import SonSlot from "./ SonSlot"

export default {

name: "parentSlot",

}

Note: Alternate content within a subassembly whose scope is the subassembly itself.

Named Slot

Multiple content can be distributed by specifying a name to an element, and named slots can coexist with a single Slot, as in the following example:

There are three elements declared in the child component, the inner one 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 no default anonymous slot is specified, redundant content fragments within the parent component are discarded.

The final rendered result of the above example is:

title

body content

More text content

bottom message

This is the header section.

Hahahaha, this is the main

This is the footer part.

import SonNameSlot from "./ SonNameSlot"

export default {

name: "parentNameSlot",

}

Thank you for reading, the above is "Vue slot how to use" content, after the study of this article, I believe everyone has a deeper understanding of Vue slot how to use this problem, the specific use of the situation still needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

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.