一、为什么我们需要slot
假如我们有个需要,子组件中需要显示一段html内容,显示什么不是由子组件决定,而是由父组件传递什么决定,我们该怎么做
很挫的做法,我们使用组件间的数据传递
父组件向子组件传递数据,使用自定义属性绑定的方式[父组件自定属性,子组件接受自定义属性,我们就可以拿到值了]
<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>
这样做的问题是:
-
子组件件件多多了一个div标签
<div v-html="this.content"></div>
这里的div不可以换成template,会无法渲染 -
传递的内容少还好,如果我们传递一大段html,这样做是不是很蠢,代码很难阅读
<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>
二、使用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插槽处,就会被子组件中间的内容直接替换。 我们像子组件中插入了一点东西,需要有插入的地方,那个地方就叫做插槽。
三,slot默认值
<slot>默认值</slot>
slot中间的内容就是默认值,但我们不想插槽插入东西的时候,他就是显示默认值。
四,多个插槽(具名插槽)
当有多个插槽的时候,我们为了区分需要给插槽取个名字,也就是具备名字的插槽
slot属性
name属性
<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(){
}
五,插槽的作用
总结: 插槽的作用:更方便的向子组件传递DOM元素
使用场景: 第三方插件中大量使用,比如element 父组件向子组件传递DOM结构的时候大量使用