文章目录
什么是插槽?
- 插槽就像放在组件中的占位标签,使用组件时我们将要放到占位标签处的DOM结构写入组件标签体中即可。
- 通俗点来讲,插槽就是在自定义组件中预留一个位置,这个位置的内容可以由使用组件的人来定义,可以通过属性等数据实现动态的内容展示及交互,具有高度的灵活性。
一:匿名/默认插槽
标签:<slot></slot>
使用方法:
- 插槽一般定义在子组件中,相当于一个占位。<slot></slot>
- 父组件模板中的子组件标签要写成一对的样式,即:<Category></Category>
- 这样<Category></Category>中的内容就会显示在子组件<slot></slot>标签的位置。
- 如果<Category></Category>中没有内容,<slot></slot>标签中的内容就会显示在页面
示例代码:
在父级模板中使用该组件时,对应位置的内容会被插入到默认插槽处:
<!-- 父组件 -->
<template>
<div>
<h1>父组件</h1>
<ChildComponent>
<template>
<p>这是插入到子组件中的内容</p>
</template>
</ChildComponent>
</div>
</template>
<!-- 子组件 -->
<template>
<div>
<h2>子组件</h2>
<!-- 这里是插槽 -->
<slot></slot>
</div>
</template>
二:后备内容
此处所说的后备内容是官方文档里面的叫法,实际上就是指插槽的默认值。在定义组件时,可以在<slot><slot>
之间给出插槽的默认内容,也就是说当使用插槽时如果没有在组件标签内定义插槽的内容,则默认内容生效,否则默认内容不生效。
例如:定义组件插槽设置默认内容
//定义一个组件Box
<template>
<div>
<div>这是一个定义了插槽的组件</div>
<!-- 通过slot定义了一个插槽,并在插槽中给出了默认值 -->
<slot>
<div>这是插槽的默认内容</div>
</slot>
<div>组件其它内容</div>
</div>
</template>
不使用默认值,覆盖
<Box>
<template>
<div>插槽中展示的内容</div>
</template>
</Box>
页面展示内容为:
三:具名插槽
一个子组件可能有多个插槽,不同的插槽放置不同的内容,为了区分不同的插槽,每个插槽应该有自己的名字
,这就是具名插槽
。
可以通过给 <slot>
元素添加 name 属性来创建具名插槽,然后在父组件中使用
<
v-slot :name ="{slotName}">
来引用具名插槽。
示例代码:
在父级模板中,使用v-slot指令(或简写为#)指定插槽名,将内容分配到相应的具名插槽:
父组件中:
<Category>
<template slot="center">
<div>html结构1</div>
</template>
<template v-slot:footer>
<div>html结构2</div>
</template>
</Category>
子组件中:
<template>
<div>
<!-- 定义插槽 -->
<slot name="center">插槽默认内容...</slot>
<slot name="footer">插槽默认内容...</slot>
</div>
</template>
四: 动态插槽
动态指令参数
在 v-slot
上也是有效的,即可以定义下面这样的动态插槽名:
<base-layout>
<template v-slot:[dynamicSlotName]>
...
</template>
<!-- 缩写为 -->
<template #[dynamicSlotName]>
...
</template>
</base-layout>
五:(1)作用域插槽
作用域插槽的应用场景:数据
在子组件
中,而根据数据生成的结构
在插槽的使用者
上。(插槽的使用者即使用子组件的父组件).
传递数据
因为插槽的使用者
(父组件)需要使用子组件的数据, 所以需要将数据从子组件传递到插槽的使用者
中。
- 子组件的传递方法:利用插槽标签
<slot></slot>
结合v-bind指令进行传递:<slot :定义属性名="传递的data数据"></slot>
可以传递多个数据 - 父组件接收数据的方法有两种:默认作用域
默认作用域插槽接受方法
插槽的使用者
接收的方法:通过子组件标签上
的v-slot
指令直接接受一个插槽的props
对象。
子组件传入插槽的props
作为v-slot
指令的值可以在插槽内的表达式中访问。
<MyComponent v-slot="slotProps">
{{ slotProps.text }} {{ slotProps.count }}
</MyComponent>
具名作用域插槽接受方法
具名作用域插槽的工作方式和普通作用域插槽的工作方式类似,插槽的props
可以作为v-slot
指令的值v-slot:name="slotProps"
被访问到,也可以使用简写#name="slotProps"
访问。
解构:v-slot:name="{slotProps}" 或 #name="{slotProps}"
子组件传递props属性:
<slot name="header" message="hello"></slot>
父组件接受props属性:
<MyComponent>
<template #header="headerProps">
{{ headerProps }}
</template>
<template #default="defaultProps">
{{ defaultProps }}
</template>
<template #footer="footerProps">
{{ footerProps }}
</template>
</MyComponent>
父组件headerProps接受到的数据是 { message: 'hello' }
子组件slot
标签的name
属性是不会传递给插槽的。
默认作用域插槽和具名作用域插槽一起使用:
当一起使用的时候相当于为默认插槽设置了一个default
的名字,使用<template>
标签和v-slot:default
接受默认作用域插槽的属性值。具名作用域插槽正常使用即可。
<template>
<MyComponent>
<!-- 使用显式的默认插槽 -->
<template #default="{ message }">
<p>{{ message }}</p>
</template>
<template #footer>
<p>Here's some contact info</p>
</template>
</MyComponent>
</template>
(2)作用域插槽动态绑定接受方法
插槽的使用者接收的方法:使用<template></template>标签的scope属性接收从子组件通过<slot>标签传递过来的所有数据,接收到的数据是一个对象。
也可以使用<template></template>标签的slot-scope属性接收数据。
scope和slot-scope接收数据支持解构赋值
注意:不需要name
<template scope="自己起的变量名">
</template>
使用:
- 子组件category.vue —— 数据在子组件中
<template>
<div class="category">
<h3>{{title}}</h3>
<!-- 插槽就相当于定义一个坑,等组件来填充 -->
<!--slot将games传递给插槽的使用者 -->
<slot :games="games">我是一个插槽</slot>
</div>
</template>
<script>
export default {
name: 'CategoryVue',
props: ['title'],
data() {
return{
games: ['王者荣耀', '我的世界', '和平精英', '穿越火线']
}
}
}
</script>
- 父组件App.vue(
插槽的使用者
) —— 结构在父组件中
<Category title="游戏">
<!-- 支持解构赋值 -->
<template slot-scope="{games}">
<ol>
<li v-for="(game,index) in games" :key="index">{{game}}</li>
</ol>
</template>
</Category>
无渲染组件
简单来说就是:只有逻辑内容没有渲染内容的子组件叫做无渲染组件,子组件的渲染通过具名插槽全权交给父组件渲染。
如果我们将这个概念拓展一下,可以想象的是,一些组件可能只包括了逻辑而不需要自己渲染内容
,视图输出通过作用域插槽全权交给了消费者组件
。我们将这种类型的组件称为无渲染组件。
插槽总结
- 插槽的作用:
让父组件可以向子组件指定位置插入html结构
,也是一种组件间通信的方式,适用于父组件===>子组件
。
使用插槽的时候父组件向子组件传递的html内容,在组件实例对象的$slots属性
上存储着父组件向子组件传递的html内容
六:vue2和vue3插槽的区别和使用
Vue2和Vue3的插槽系统有一些差异,但基本概念相同。
-
默认插槽:
在Vue2中,可以使用
<slot></slot>
来定义默认插槽。在Vue3中,默认插槽不需要特殊标记,可以直接通过模板使用<slot></slot>
。 -
具名插槽:
在Vue2中,可以通过
<slot name="slotName"></slot>
来定义具名插槽,然后在父组件中使用<template v-slot:slotName>
来填充。在Vue3中,插槽的定义和使用方法保持一致,只是指令形式有所变化,使用#slotName
代替v-slot:slotName
。 -
作用域插槽:
在Vue2中,可以通过
<slot name="slotName" :text="someText"></slot>
传递数据到具名插槽,子组件通过this.$slots.slotName
来接收插槽。在Vue3中,使用v-slot:slotName="slotProps"
来接收作用域插槽的数据,其中slotProps
是一个包含传递数据的对象。