Home > Developer > Web Develop
Data from: https://cn.vuejs.org/v2/guide/components.html# named-slot
On the basis of the official documents, more detailed explanation of the code.
<slot>Anything in the tag is treated as a fallback and only appears if the host element is empty.
<slot>the contents of the parent component are discarded unless the child component template contains at least one socket.
<Body> <DivID= "App"> <H1>I am the title of the parent component</H1> <my-component> <P>Here are some initial content</P> <P>This is more of the initial content</P> </my-component> </Div> <Scriptsrc= "Js/vue.min.js"></Script> <Script> NewVue ({el:'#app', components:{mycomponent:{Template:'<div>', } } }) </Script></Body>
2.
named
Slots
Slots can have different names. The named slot matches the corresponding attribute in the content fragment slot .
The elements that nest the corresponding parent component to the child component location of the named slot are displayed.
<App-layout> <H1Slots= "header">This may be a page title</H1> <P>A paragraph of the main content.</P> <P>Another major paragraph.</P> <PSlots= "Footer">Here are some contact information</P> </App-layout> <Scriptsrc= "Js/vue.min.js"></Script> <Script> NewVue ({el:'#container', components:{applayout:{Template:'<div class= "Container" >
<slot name= "Header" ></slot><main><slot></slot></main>
<footer><slot name= "Footer" ></slot></footer>
</div>',
} } })
vuejs-component-<slot> label distribution content
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
