vue中的插槽————slot
什么是插槽?
插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。
插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制
插槽分类
- 匿名插槽(也叫默认插槽): 没有命名,有且只有一个
- 具名插槽: 相对匿名插槽组件slot标签带name命名的
- 作用域插槽: 子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)
怎么用插槽?
默认情况下是不会显示的,如下图所示,页面并没有显示增加的span 元素内容。那么我执意要加DOM元素到子组件上该怎么实现呢?这就用到了slot插槽,使用slot这个标签可以将父组件放在子组件的内容,放到它想显示的地方
//父组件
Vue.component('parent', {
template: `
<div>
我是父组件
<slotOne>
<p style="color:red">我是父组件插槽内容</p>
<!--这里不显示-->
</slotOne>
</div>`
});
//子组件
Vue.component('slotOne', {
template: `
<div>
<p>我是子组件插槽内容</p>
</div>
`
});
new Vue({
el: '#app'
})
如图:
匿名插槽
我们将上面的代码改一改 , 给child组件添加slot插槽,那么父组件的添加的DOM元素就填充到这个slot插槽里面了
//子组件
Vue.component('slotOne', {
template: `
<div>
<p>我是子组件插槽内容</p>
<slot></slot>
</div>
`
});
Vue.component('slotOne', {
template: `
<div>
<slot></slot>
<p>我是子组件插槽内容</p>
</div>
`
});
注意:如果有多个DOM元素,会一起插入到这个标签内
具名插槽
现在我们需要将父组件添加的HTML标签放在子组件里的不同位置。具名插槽实现:先在子组件对应分发slot标签里,添加name=”name名” 属性,其次父组件在要分发的标签里添加 slot=”name名” 属性,然后就会将对应的标签放在对应的位置了。
简单理解就是:给子组件占的每一个坑取名,将父组件添加的HTML元素添加到指定名字的坑,就实现了分发内容在不同位置显示
【Child组件模板】
Vue.component('slotOne', {
template: `
<div>
<slot name="header"></slot>
<p>我是子组件插槽内容</p>
<slot name="footer"></slot>
</div>
`
});
【父组件引用Child组件】
Vue.component('parent', {
template: `
<div>
我是父组件
<slotOne>
<p slot="header" style="color:red">我是父组件插槽内容1</p>
<p slot="footer" style="color:red">我是父组件插槽内容2</p>
</slotOne>
</div>`
});
v-slot
在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。
v-slot 只能添加到 或自定义组件上,这点与弃用的 slot 属性不同