在vue中使用插槽

插槽(slot)这个概念非常重要

插槽的使用场景1：在子组件里面显示父组件的dom

<div id='root'>
　　<child content = '<p>Dell</p>'></child>
</div>

<script>
Vue.component('child',{
　　props:['content'],
　　template:`
　　　　<div>
　　　　　　<p>hello</p>
　　　　　　<div v-html='this.content'></div>
　　　　</div>
　　`
})
var vm = new Vue({
　　el:'#root'
})
</script>

发现这样，能显示出来，但外层必须要包裹一层div，无法直接显示p，而且当内容比较多的时候，会比较难看，

这个时候就用到vue里面新到语法，slot

<div id='root'>
　　<child>
　　　　<h1>dell</h1>
　　</child>
</div>

<script>
Vue.component('child',{
　　template:`
　　　　<div>
　　　　　　<p>hello</p>
　　　　　　<slot></slot>
　　　　</div>
　　`
})
var vm = new Vue({
　　el:'#root'
})
</script>

像这样，父组件里面直接写dom元素，通过slot引用，在子组件插入点内容，叫做插槽

slot特性

1、默认内容

Vue.component('child',{
　　template:`
　　　　<div>
　　　　　　<p>hello</p>
　　　　　　<slot>默认内容</slot>
　　　　</div>
　　`
})

如果父没传dom过来，slot会显示默认内容

2、当有多个slot的时候

<div id='root'>
　　<body-content>
　　　　<div class="header">header</div>
　　　　<div class="footer">footer</div>
　　</body-content>
</div>


<script>
Vue.component('body-content',{
　　template:`
　　　　<div>
　　　　　　<slot></slot>
　　　　　　<div>content</div>
　　　　　　<slot></slot>
　　　　</div>
　　`
})
var vm = new Vue({
　　el:'#root'
})
</script>

像这样，肯定不对，页面会出现两个header,footer ,那怎么做，给slot取个名字，具名插槽

<div id='root'>
　　<body-content>
　　　　<div class="header" slot='header'>header</div>
　　　　<div class="footer" slot='footer'>footer</div>
　　</body-content>
</div>


<script>
Vue.component('body-content',{
　　template:`
　　　　<div>
　　　　　　<slot name='header'></slot>
　　　　　　<div>content</div>
　　　　　　<slot name='footer'></slot>
　　　　</div>
　　`
})
var vm = new Vue({
　　el:'#root'
})
</script>

这样就可以，父组件中定义两个插槽，子组件进行相应的引用

猜你喜欢