插槽
1.
什么是插槽:
插槽就是子组件中的提供给父组件使用的一个占位符,用 表示,父组件可以在这个占位符中填充任何模
板代码
2.
插槽的作用
:
更好的复用组件
![](https://i-blog.csdnimg.cn/blog_migrate/4cb9b8c84d406cc5a8ffab5d616f7964.png)
3.
插槽的分类
:
匿名插槽
具名插槽
作用域插槽
1.1
匿名插槽
没有名字的插槽
,
只需在子组件里面调用组件,用来占位
在父组件里面,去定义内容
<!-- child.vue -->
<template>
<div>
我是子组件
<!--
插槽位置
-->
<slot />
</div>
</template>
<script>
export default
{}
</script>
<!-- parent.vue -->
<template>
<div>
1.2
具名插槽
具有名字的插槽就是具名插槽
使用
<slot />
中的
"name"
属性绑定元素,
name
就是插槽的名字
我是父组件
<child>
<!--
插槽内容
-->
<strong>
你好啊
</strong>
</child>
</div>
</template>
<script>
import
Child
from
'./child'
;
export default
{
components
: {
child
:
Child
}
}
</script>
<!--
子组件
-->
<template>
<div>
我是子组件
<!--
插槽定义
-->
<slot
name
=
"header"
></slot>
<slot></slot>
<slot
name
=
"footer"
></slot>
</div>
</template>
<script>
export default
{}
</script>
<!--
父组件
-->
<template>
<div>
我是父组件
<base-layout>
<!--#header
是
slot="header"
的缩写;
template
模板的作用是可以将两个
header
标签
看成一个整体
-->
<!--
插槽内容
-->
<template
#header
>
<header>
我是
header
</header>
<header>
我是
header2
</header>
</template>
<main>
<p>
我是内容
1
</p>
<p>
我是内容
2
</p>
</main>
<footer
slot
=
"footer"
>
我是
footer
</footer>
</base-layout>
</div>
1.3
作用域插槽
作用:
可以让父组件对子组件的内容进行加工处理
既可以复用子组件的
slot
,又可以使
slot
内容不一致
使用方式:
子组件中给
<slot>
标签绑定要传递的数据
在父组件中使用
v-slot
指令来绑定一个自定义属性
父组件通过绑定的自定义属性值来接收子组件的值
</template>
<script>
import
BaseLayout
from
'./base'
;
export default
{
components
: {
'base-layout'
:
BaseLayout
}
}
</script>
<!--
子组件
:zuoyong.vue-->
<template>
<div>
<ul>
<li
v-for
=
"item in list"
:key
=
"item.id"
>
<!--
插槽位置
-->
<slot
:info
=
"item"
></slot>
</li>
</ul>
</div>
</template>
<script>
export default
{
props
: [
'list'
]
}
</script>
<!--
父组件:
parent.vue -->
<template>
<div>
我是父组件
<zuoyong
:list
=
"list"
>
<!--
插槽内容
-->
<template
v-slot
=
"slotProps"
>
<span
v-if
=
"slotProps.info.id === 1"
class
=
"active"
>
{{ slotProps.info.uname }}
</span>
<span
v-else
>
{{ slotProps.info.uname }}
</span>
</template>
</zuoyong>
</div>
</template>
<script>
import
Zuoyong
from
'./zuoyong'
;
2
案例讲解
-TODO
案例效果演示:
项目目录结构:
export default
{
data
() {
return
{
list
: [
{
id
:
1
,
uname
:
"
张三
"
},
{
id
:
2
,
uname
:
"
李四
"
},
{
id
:
3
,
uname
:
"
王五
"
}
]
}
},
components
: {
zuoyong
:
Zuoyong
}
}
</script>
<style
scoped
>
.active
{
color
:
#f00
;
}
</style>