Vue 中 slot 插槽的使用方法

2021 年 12 月 15 日
本文字数：1675 字
阅读完需：约 5 分钟

1.概念

Vue 实现了一套内容分发的 API，将 slot 元素作为承载分发内容的出口。

它允许你像这样合成组件：

<template>    <view>        <componentA>            Hi man, you are smart.        </componentA>    </view></template>

复制代码

在 <componentA> 的模板中可能会写为：

<template>    <view>        <!-- 我是子组件componentA -->        <view >{{title}}</view>        <slot></slot>    </view></template>

复制代码

当组件渲染的时候，<slot></slot> 将会被替换为“Hi man, you are smart.”。插槽内可以包含任何模板代码，包括 HTML ：

<template>    <view>        <!-- 我是父组件 -->        <componentA>            <view>Your Profile</view>            <!-- 添加一个 uni-icons 图标 -->            <uni-icons type="contact" size="30"></uni-icons>        </componentA>    </view></template>

复制代码

如果 <componentA> 的 template 中没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。

2.原理

2.1 编译作用域:

插槽跟模板的其它地方一样可以访问相同的实例 property (也就是相同的“作用域”)
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

2.2 默认内容

插槽设置具体的后备 (也就是默认的) 内容只会在没有提供内容的时候被渲染。

2.3 具名插槽

需要多个插槽时，可以利用 <slot> 元素的一个特殊的特性：name 来定义具名插槽

<template>        <view  class="container">            <header>                <!-- 我们希望把页头放这里 -->                <slot name="header"></slot>            </header>            <main>                <!-- 我们希望把主要内容放这里 -->                <slot></slot>            </main>            <footer>                <!-- 我们希望把页脚放这里 -->                <slot name="footer"></slot>            </footer>        </view>    </template>

复制代码

在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称

 <template>        <view>        <!-- 父组件使用子组件`<base-layout>`，节点上使用slot特性： -->            <base-layout>                <template v-slot:header>                    <view>Here might be a page title</view>                </template>                <template v-slot:default>                    <view>A paragraph for the main content.</view>                    <view>And another one.</view>                </template>                <template v-slot:footer>                    <view>Here's some contact info</view>                </template>            </base-layout>        </view>    </template>

复制代码

v-slot 只能添加在 <template> 上，一个不带 name 的 <slot> 出口会带有隐含的名字 “default”
缩写：把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

2.4 作用域插槽

3.源码

组件的源码：

<template>	<view class="root">		<!-- <text>hello world</text> -->		<slot></slot>		<!-- <slot-scope></slot-scope> -->	</view></template>
<script>	export default {		name:"item-slot",		data() {			return {							};		}	}</script>
<style>	.root{	}</style>

复制代码

父组件的源码：

<template>	<view class="container">		<itemslot>			<view class="item-parent" @click="ppp">				<text class="item-text">打开奇迹</text>				<image class="item-iamge" src="../../static/next1.svg"></image>			</view>			<view class="item-parent no-border-bottom" @click="qqq">				<text class="item-text">点亮梦想</text>				<image class="item-iamge" src="../../static/next1.svg"></image>			</view>		</itemslot>	</view></template>