Vue introduction tutorial – slot
Welcome to pay attention to the blogger public number “Java master”, focus on sharing the Java field dry goods article, pay attention to reply to “resources”, free to receive the network’s hottest Java architect study PDF, reproduced please specify the source www.javaman.cn/vue/vue-slo…
In the last section we looked at vUE components. In this section we’ll look at another concept slot for VUE
1. Why slot?
< slot > element
Shadow DOM uses elements to group different DOM trees together. Slots are placeholders inside components that users can fill with their own tags.
By defining one or more slots, you can introduce external tags into the component’s Shadow DOM for rendering. This is the equivalent of saying “Render the user’s markup here.”
In common terms:
Slot is an extension of a component. A slot is used to transfer content to a specified location inside the component. < slot name= “mySlot” < slot name= “mySlot” > < slot name= “mySlot” > < slot name= “mySlot” > Elements in the component tag that use the attribute slot= “mySlot” are replaced with the corresponding location content;
2. Slot-slot
(1) the HTML code
The template in toDO, a component defined in the figure below, defines three slots title, Content, and category using the slot keyword
Each plug is actually a component
<div id="app">
<! Bind title, Content, and category to data by attribute -->
<todo>
<todo-title slot="title" :title="title"></todo-title>
<todo-content slot="content" :content="content"></todo-content>
<todo-category slot="category" v-for="category in categorys" :category="category"></todo-ategory>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
// Define the name of the slot
Vue.component('todo', {template:
'<div>' +
'<slot name="title"></slot>'+
'<slot name="content"></slot>'+
'Category:'+
'<ul>' +
'<slot name="category"></slot>'+
'</ul>'+
'</div>'
})
// Define the todo-title component, passing the value to the title via the title property
Vue.component('todo-title', {props: ['title'].template:{{title}}'
})
// Define the todo-content component, passing the value to content via the content property
Vue.component('todo-content', {props: ['content'].template: contents: {{content}}
'
})
// Define todo-category and pass the value to category via the category attribute
Vue.component('todo-category', {props: ['category'].template:'<li>{{category}}</li>'
})
var vm = new Vue({
el:"#app".data: {title:"Master Java".content:"I love Java. I love learning. I want to be a rich kid.".categorys: ["java"."Technical"."Daniel"]}});</script>
Copy the code