插槽就是在你子组件的模板里可以开辟一个或多个槽,让其他一些内容可以插入进来,称之为插槽。
new Vue({
el:"#app",
template:`<div>
<child>我想让这一行字显示出来</child>
</div>`,
components:{
child:{
template:`<h1>子组件</h1>`
}
}
})
我们想在上面的<child></child>
标签里面写了一句话,但是发现页面上没有显示出来。
如果你想让他显示出来呢?这时候我们就需要用到插槽了。
1 . 插槽可以插入哪些内容
2 . 匿名插槽
3 . 具名插槽
4 . 作用域插槽
new Vue({
el:"#app",
template:`<div>
<child>我是一个</child>
</div>`,
components:{
child:{
template:`<h1><slot></slot>子组件</h1>`
}
}
})
Vue.component('global1',{
template:`<div>我是一个</div>`
})
Vue.component('global2',{
template:`<div>没用的</div>`
})
new Vue({
el:"#app",
template:`<div>
<child>
<global1></global1>
<global2></global2>
</child>
</div>`,
components:{
child:{
template:`<h1><slot></slot>子组件</h1>`
}
}
})
上面的实例中就是匿名插槽 ,也就是这种形式 <slot></slot>
-----------------#####2.6.0前版本-----------------
new Vue({
el:"#app",
template:`<div>
<child>
<template slot="header">
<h1>2.6.0版本前具名插槽的第一种写法</h1>
</template>
</child>
</div>`,
components:{
child:{
template:`<h1>
<slot name='header'></slot>子组件
</h1>`
}
}
})
new Vue({
el:"#app",
template:`<div>
<child>
<h1 slot="header">2.6.0版本前具名插槽的第二种写法</h1>
</child>
</div>`,
components:{
child:{
template:`<h1>
<slot name='header'></slot>子组件
</h1>`
}
}
})
-----------------#####2.6.0后版本-----------------
new Vue({
el:"#app",
template:`<div>
<child>
<template v-slot:header>
<h1>2.6.0版本后具名插槽的第一种写法</h1>
</template>
</child>
</div>`,
components:{
child:{
template:`<h1>
<slot name="header"></slot>子组件
</h1>`
}
}
})
new Vue({
el:"#app",
template:`<div>
<child>
<template #header>
<h1>2.6.0版本前后具名插槽的第二种写法</h1>
</template>
</child>
</div>`,
components:{
child:{
template:`<h1>
<slot name="header"></slot>子组件
</h1>`
}
}
})
-----------------#####2.6.0前版本-----------------
new Vue({
el:"#app",
template:`<div>
<child>
<template slot-scope="item">
{{item.myUser}}
</template>
</child>
</div>`,
components:{
child:{
template:`<h1>
<slot :myUser="slotProps"></slot>子组件
</h1>`,
data(){
return {
slotProps:'2.6.0版本前作用域插槽'
}
}
}
}
})
-----------------#####2.6.0后版本-----------------
new Vue({
el:"#app",
template:`<div>
<child>
<template v-slot="item">
{{item.myUser}}
</template>
</child>
</div>`,
components:{
child:{
template:`<h1>
<slot :myUser="slotProps"></slot>子组件
</h1>`,
data(){
return {
slotProps:'2.6.0版本后没有名字的作用域插槽'
}
}
}
}
})
new Vue({
el:"#app",
template:`<div>
<child>
<template v-slot:header="item">
{{item.myUser}}
</template>
</child>
</div>`,
components:{
child:{
template:`<h1>
<slot name="header" :myUser="slotProps"></slot>子组件
</h1>`,
data(){
return {
slotProps:'2.6.0版本后有名字的作用域插槽'
}
}
}
}
})
new Vue({
el:"#app",
template:`<div>
<child>
//匿名作用域插槽(1)
<template v-slot="item">
{{item.myUser}}
</template>
//具名作用域插槽(2)
<template v-slot:header="item">
{{item.myUser}}
</template>
//简写具名作用域插槽(3)
<template #footer="item">
{{item.myUser}}
</template>
</child>
</div>`,
components:{
child:{
template:`<h1>
//匿名作用域插槽(1)
<slot :myUser="slotProps"></slot>子组件
//具名作用域插槽(2)
<slot :myUser="slotProps" name="header"></slot>子组件
//简写具名作用域插槽(3)
<slot :myUser="slotProps" name="footer"></slot>子组件
</h1>`,
data(){
return {
slotProps:'2.6.0版本后有名字的作用域插槽'
}
}
}
}
})
原文:https://www.cnblogs.com/liu-di/p/11222327.html