First, why do we need slot
If we have a need, a subcomponent needs to display some html content, to show what is not determined by the subassembly, but what the decision passed by the parent component, how do we do
Very frustrated approach, we use the data transfer between components
Transmitted to the parent sub-assembly component data, using a self-defined binding properties [parent component custom properties, custom properties subassembly accepted, we can get the value]
<div id="root">
<child content="<p>hello world</p>"></child>
</div>
<script type="text/javascript">
Vue.component('child',{
props:['content'],
template: `<div>
<p>hello</p>
<div v-html="this.content"></div>
</div>`
})
new Vue({
el:'#root'
})
</script>
The problem with this is:
-
A lot of the sub-assembly pieces a div tag
<div v-html="this.content"></div>div here can not be replaced by template, will not be rendered -
Content delivery less okay, if we pass a large section of html, doing so is not stupid, the code difficult to read
<div id="root">
<child content="<p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p><p>hello world</p>"></child>
</div>
Second, the use of slot
<div id="root">
<child><p>hello world</p></child>
</div>
<script type="text/javascript">
Vue.component('child',{
props:['content'],
template: `<div>
<p>hello</p>
<slot></slot>
`
})
new Vue({
el:'#root'
})
</script>
slot socket, the intermediate will be a direct replacement blankets component content. We insert sub-assembly as a little thing, need a place to insert, and that place is called the slot.
Three, slot defaults
<slot>默认值</slot>
slot in the middle of the contents of the default, but we do not want things when inserted into the slot, he is displaying the default value.
Fourth, the plurality of slots (named slots)
When there are multiple sockets, we need to slot in order to distinguish a name, that is, with the name of the slot
slot properties
The name attribute
<div id="app">
<contents>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
</contents>
</div>
<script type="text/javascript">
Vue.component('contents',{
template:`
<div >
<slot name="header"></slot>
<div class="content">content</div>
<slot name="footer"></slot>
</div>`,
methods:{
show:function(){
}
},
mounted:function(){
}
Fifth, the role of slots
Summary: The role of slots: easier to pass a DOM element subassembly
Usage scenarios: the extensive use of third-party plug-ins, such as a parent component element DOM structure passed to the sub-assembly when heavy use
Reproduced in: https: //my.oschina.net/2016jyh/blog/1834100