-
在vue中,引入的子组件标签中间是不允许写内容的。为了解决这个问题,官方引入了插槽(slot)的概念。
-
插槽,其实就相当于占位符。它在组件中给你的HTML模板占了一个位置,让你来传入一些东西。
插槽分为匿名插槽、具名插槽以及作用域插槽。
- 匿名插槽
我们又可以叫它单个插槽或者默认插槽。与具名插槽相对,它不需要设置name属性。(它隐藏的name属性为default。)
匿名插槽组件中的引用:
<show-cont>
aaa
</test-man>
组件中匿名插槽的使用:
Vue.component('show-cont', {
template:`
<slot>
</slot>
`
})
如上例,slot标签未设置name属性,所以show-cont组件引用时标签内的文字默认指向到组件中唯一的solt
- 具名插槽
插槽有一个name属性。与匿名插槽相对,加了name属性的匿名插槽就是具名插槽 匿名插槽组件中的引用:
<show-cont>
<template v-slot:aa>
<span>这是第二个插槽的内容</span>
</template>
<template v-slot:bb>
<span>这是第一个插槽的内容</span>
</template>
</show-cont>
组件中匿名插槽的使用:
Vue.component('show-cont', {
data(){
return {
}
},
template:`
<div>
<slot name="aa">
</slot>
<slot name="bb">
</slot>
</div>
`
})
- 作用域插槽
这类插槽可以让父组件使用子组件的数据,只需子组件在插槽中用v-bind
绑定自身的数据,然后父组件在使用组件时就可以用v-slot="slotProps"
接收,
注意:这里的slotProps
可以自定义。
<show-cont v-slot="props">
<v-btn >{{props.person.name}}</v-btn>
</show-cont>
组件中匿名插槽的使用:
Vue.component('show-cont', {
data(){
return {
person: {
name: 'wang123'
}
}
},
template:`
<div>
<slot v-bind:person="person">
</slot>
</div>
`
})
另外
solt标签中依然可以书写别的内容作为slot的默认值,如果组件引用时并未给slot重新赋值的话,则会使用默认值,若赋值则会覆盖默认值。 如下例:
匿名插槽组件中的引用:
<show-cont>
aaa
</test-man>
组件中匿名插槽的使用:
Vue.component('show-cont', {
template:`
<div>
<slot>
bbb
</slot>
</div>
`
})
这样组件显示为结果为:aaa
//bbb为默认值,aaa覆盖默认值显示