插槽

这里有一个 <FancyButton> 组件，可以像这样使用：

vue

<FancyButton>
  Click me! <!-- 插槽内容 -->
</FancyButton>

而 <FancyButton> 的模板是这样的：

vue

<button class="fancy-btn">
  <slot></slot> <!-- 插槽出口 -->
</button>

<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

匿名插槽

javascript

匿名插槽:slot组件，没有name属性
插槽：在子组件当中通过内置的slot组件进行占位。该占位可以呈现使用子组件时所包裹的内容。

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 slot元素作为承载分发内容的出口。

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

html

<navigation-link url="/profile">
  Your Profile
</navigation-link>

然后你在 navigation-link 的模板中可能会写为：

html

<a
  v-bind:href="url"
  class="nav-link"
>
  <slot></slot>
</a>

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

html

<navigation-link url="/profile">
  <!-- 添加一个 Font Awesome 图标 -->
  <span class="fa fa-user"></span>
  Your Profile
</navigation-link>

甚至其它的组件：

html

<navigation-link url="/profile">
  <!-- 添加一个图标的组件 -->
  <font-awesome-icon name="user"></font-awesome-icon>
  Your Profile
</navigation-link>

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

javascript

插槽：在子组件当中通过内置的slot组件进行占位。该占位可以呈现使用子组件时所包裹的内容。

具名插槽

具名插槽：即具有名字的插槽，在默认插槽基础上指定插槽的名字（name = " "）。
父组件指明放入子组件的哪个插槽 slot = "footer"
如果是template可以写成 v-slot : footer

javascript

<!-- 将包裹的内容放置到名字为a的插槽中  --> 父组件 v-slot:可以使用#缩写
<template>
    <div>
        <BookList>
            <template slot="a">
                <div>1</div>
            </template>
        </BookList>
    </div>
</template>

<!-- 将包裹的内容放置到名字为one的插槽中  --> BookList子组件
<div>
     <slot name="a"></slot>
</div>

具名插槽的缩写

2.6.0 新增

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

javascript

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

然而，和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：

javascript

<!-- 这样会触发一个警告 -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>

如果你希望使用缩写的话，你必须始终以明确插槽名取而代之：

javascript

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>

编译作用域

当你想在一个插槽中使用数据时，例如：

html

<navigation-link url="/profile">
  Logged in as {{ user.name }}
</navigation-link>

该插槽跟模板的其它地方一样可以访问相同的实例 property (也就是相同的“作用域”)，而不能访问 <navigation-link> 的作用域。例如 url 是访问不到的：

html

<navigation-link url="/profile">
  Clicking here will send you to: {{ url }}
  <!--
  这里的 `url` 会是 undefined，因为其 (指该插槽的) 内容是
  _传递给_ <navigation-link> 的而不是
  在 <navigation-link> 组件*内部*定义的。
  -->
</navigation-link>

作为一条规则，请记住：

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

后备内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个 <submit-button> 组件中：

html

<button type="submit">
  	<slot></slot>
</button>

我们可能希望这个 <button> 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在 <slot> 标签内：

html

<button type="submit">
  	<slot>Submit</slot>
</button>

现在当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时：

html

<submit-button></submit-button>

后备内容“Submit”将会被渲染：

html

<button type="submit">
  	Submit
</button>

但是如果我们提供内容：

html

<submit-button>
  	Save
</submit-button>

则这个提供的内容将会被渲染从而取代后备内容：

html

<button type="submit">
  	Save
</button>

作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。例如，设想一个带有如下模板的 <current-user> 组件：

javascript

// current-user 子组件
<span>
  	<slot>{{ user.lastName }}</slot>
</span>

我们可能想换掉备用内容，用名而非姓来显示。如下：

javascript

// App.vue 父组件
<current-user>
  	{{ user.firstName }}
</current-user>

然而上述代码不会正常工作，因为只有 <current-user> 组件可以访问到 user，而我们提供的内容是在父级渲染的。

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去：

javascript

// current-user 子组件
<span>
  	<slot v-bind:user="user">
    	{{ user.lastName }}
  	</slot>
</span>

绑定在 <slot> 元素上的 attribute 被称为插槽 prop，父组件通过v-slot的属性值slotProps接收插槽 prop。

现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

javascript

<current-user>
  	<template v-slot:default="slotProps">
    	{{ slotProps.user.firstName }}
  	</template>
</current-user>

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。

独占默认插槽的缩写语法

在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：

html

<current-user v-slot:default="slotProps">
  	{{ slotProps.user.firstName }}
</current-user>

这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：

html

<current-user v-slot="slotProps">
  	{{ slotProps.user.firstName }}
</current-user>

注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：

html

<!-- 无效，会导致警告 -->
<current-user v-slot="slotProps">
  	{{ slotProps.user.firstName }}
  	<template v-slot:other="otherSlotProps">
    	slotProps is NOT available here
  	</template>
</current-user>

只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法：

html

<current-user>
  	<template v-slot:default="slotProps">
    	{{ slotProps.user.firstName }}
  	</template>
  	<template v-slot:other="otherSlotProps">
    	...
  	</template>
</current-user>

解构插槽 Prop

作用域插槽的内部工作原理是将你的插槽内容包裹在一个拥有单个参数的函数里：

function (slotProps) {
  	// 插槽内容
}

这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：

html

<current-user v-slot="{ user }">
  	{{ user.firstName }}
</current-user>

这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：

html

<current-user v-slot="{ user: person }">
  	{{ person.firstName }}
</current-user>

你甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形：

html

<current-user v-slot="{ user = { firstName: 'Guest' } }">
  	{{ user.firstName }}
</current-user>

子组件向父组件传值

使用案例1

src->components->Childs.vue

vue

<template>
    <div>
        <slot :a="a" :b="b" :arr="arr"></slot>
    </div>
</template>

data(){
    return {
        a:1,
        b:2,
        arr:[1,2,3,4,5]
    }
},

父组件：src->App.vue

javascript

<template>
    <!--default可以省略不写 v-slot:可以省略为#-->
    <BookList v-slot="slotProps">
        <div>a:{{slotProps.a}}</div>
        <div>b:{{slotProps.b}}</div>
        <div>arr:{{slotProps.arr}}</div>
	</BookList>
	<!--default可以省略不写 v-slot:可以省略为#-->
	<BookList v-slot:default="slotProps">
        <div>a:{{slotProps.a}}</div>
        <div>b:{{slotProps.b}}</div>
        <div>arr:{{slotProps.arr}}</div>
	</BookList>
</template>

使用案例2

src->App.vue

vue

<template>
    <h3>App</h3>
    <Child>
        <!--把template包裹的标签放置在子组件对应的slot标签中渲染 -->
        <!-- 入口 -->
        <!--slotProps用于接收子组件传来的属性-->
        <template v-slot="slotProps">
            <p>{{ slotProps.userName }}</p>
            <p>{{ slotProps.age }}</p>
        </template>
    </Child>
</template>

<script lang="ts" setup>
import Child from "@/components/Child.vue";

</script>

src->components->Child.vue

vue

<template>
    <h3>Child</h3>
    <!-- 向父组件传递 userName和age属性 -->
    <!--父组件template标签内的数据默认在slot标签位置渲染-->
    <!-- 出口 -->
    <slot :userName="userName" :age="age"></slot>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// 获取父组件的属性 info
const props = defineProps(["food"]);
// 定义一个ref实例
const userName = ref("hanser")
const age = ref(18)

// 暴漏数据
defineExpose({ userName, age })
</script>

动态插槽名

2.6.0 新增

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

javascript

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

其它示例

**插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。**这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。

例如，我们要实现一个 <todo-list> 组件，它是一个列表且包含布局和过滤逻辑：

javascript

<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

我们可以将每个 todo 作为父级组件的插槽，以此通过父级组件对其进行控制，然后将 todo 作为一个插槽 prop 进行绑定：

javascript

<ul>
  <li
    v-for="todo in filteredTodos"
    v-bind:key="todo.id"
  >
    <!--
    我们为每个 todo 准备了一个插槽，
    将 `todo` 对象作为一个插槽的 prop 传入。
    -->
    <slot name="todo" v-bind:todo="todo">
      <!-- 后备内容 -->
      {{ todo.text }}
    </slot>
  </li>
</ul>

现在当我们使用 <todo-list> 组件的时候，我们可以选择为 todo 定义一个不一样的 <template> 作为替代方案，并且可以从子组件获取数据：

javascript

<todo-list v-bind:todos="todos">
  <template v-slot:todo="{ todo }">
    <span v-if="todo.isComplete">✓</span>
    {{ todo.text }}
  </template>
</todo-list>

这只是作用域插槽用武之地的冰山一角。想了解更多现实生活中的作用域插槽的用法，我们推荐浏览诸如 Vue Virtual Scroller、Vue Promised 和 Portal Vue 等库。

插槽 ​

匿名插槽 ​

具名插槽 ​

具名插槽的缩写 ​

编译作用域 ​

后备内容 ​

作用域插槽 ​

独占默认插槽的缩写语法 ​

解构插槽 Prop ​

子组件向父组件传值 ​

动态插槽名 ​

其它示例 ​

插槽

匿名插槽

具名插槽

具名插槽的缩写

编译作用域

后备内容

作用域插槽

独占默认插槽的缩写语法

解构插槽 Prop

子组件向父组件传值

动态插槽名

其它示例