何时何地使用 Vue 的作用域插槽

曾经终败给现在 2023-01-12 15:58 30阅读 0赞

> 作者：Ashish Lahoti  
> 译者：前端小智  
> 来源：codingnconcept

> **点赞再看**，微信搜索\*\*【[大迁世界][Link 1]】**,B站关注【[前端小智][Link 2]】这个没有大厂背景，但有着一股向上积极心态人。本文 `GitHub` https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。**

Vue插槽是一种将内容从父组件注入子组件的绝佳方法。

下面是一个基本的示例，如果我们不提供父级的任何`slot`位的内容，刚父级`<slot>`中的内容就会作为后备内容。

// ChildComponent.vue
    <template>
      <div>
         <slot> Fallback Content </slot>
      </div>
    </template>

然后在我们的父组件中:

// ParentComponent.vue
    <template>
       <child-component>
          Override fallback content
       </child-component>
    </template>

编译后，我们的DOM将如下所示。

<div> Override fallback content </div>

我们还可以将来自父级作用域的任何数据包在在 `slot` 内容中。 因此，如果我们的组件有一个名为`name`的数据字段，我们可以像这样轻松地添加它。

<template>
       <child-component>
          {
       { text }} 
       </child-component>
    </template>
    
    <script>
    export default {
       data () {
         return {
           text: 'hello world',
         }
       }
    }
    </script>

### 为什么我们需要作用域插槽 ###

我们来看另一个例子，假设我们有一个`ArticleHeader`组件，`data` 中包含了一些文章信息。

// ArticleHeader.vue
    <template>
      <div>
        <slot v-bind:info="info"> {
       { info.title }} </slot>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          info: {
            title: 'title',
            description: 'description',
          },
        }
      },
    }
    </script>

我们细看一下 `slot` 内容，后备内容渲染了 `info.title`。

在不更改默认后备内容的情况下，我们可以像这样轻松实现此组件。

// ParentComponent.vue
    <template>
      <div>
        <article-header />
      </div>
    </template>

在浏览器中，会显示 `title`。

![image.png][]

虽然我们可以通过向槽中添加模板表达式来快速地更改槽中的内容，但如果我们想从子组件中渲染`info.description`，会发生什么呢?

我们想像用下面的这种方式来做：

// Doesn't work!
    <template>
      <div>
        <article-header>
            {
       { info.description }}
        </article-header>
      </div>
    </template>

但是，这样运行后会报错 ：`TypeError: Cannot read property ‘description’ of undefined`。

这是因为我们的父组件不知道这个`info`对象是什么。

那么我们该如何解决呢？

### 引入作用域插槽 ###

**简而言之，作用域内的插槽允许我们父组件中的插槽内容访问仅在子组件中找到的数据。** 例如，我们可以使用作用域限定的插槽来授予父组件访问`info`的权限。

我们需要两个步骤来做到这一点：

*  使用`v-bind`让`slot`内容可以使用`info`
 *  在父级作用域中使用`v-slot`访问`slot`属性

首先，为了使`info`对父对象可用，我们可以将`info`对象绑定为插槽上的一个属性。这些有界属性称为**slot props**。

// ArticleHeader.vue
    <template>
      <div>
        <slot v-bind:info="info"> {
       { info.title }} </slot>
      </div>
    </template>

然后，在我们的父组件中，我们可以使用`<template>`和`v-slot`指令来访问所有的 slot props。

// ParentComponent.vue 
    <template>
      <div>
        <child-component>
          <template v-slot="article">
          </template>
        </child-component>
      </div>
    </template>

现在，我们所有的slot props,（在我们的示例中，仅是 `info`）将作为`article`对象的属性提供，并且我们可以轻松地更改我们的`slot`以显示`description`内容。

// ParentComponent.vue 
    <template>
      <div>
        <child-component>
          <template v-slot="article">
            {
       { article.info.description }}
          </template>
        </child-component>
      </div>
    </template>

最终的效果如下：

![image.png][image.png 1]

### 总结 ###

尽管Vue 作用域插槽是一个非常简单的概念-让插槽内容可以访问子组件数据，这在设计出色的组件方面很有用处。 通过将数据保留在一个位置并将其绑定到其他位置，管理不同状态变得更加清晰。

~完，我是刷碗智，我要去刷碗了，骨得白

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://learnvue.co/2021/03/when-why-to-use-vue-scoped-slots/

## 交流 ##

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[Link 1]: https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA
[Link 2]: https://space.bilibili.com/31089477
[image.png]: /images/20221022/192c1361529a4a9d88d3e506d12732e6.png
[image.png 1]: /images/20221022/0711518aaa1f47e9840d5e58b27998e3.png
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi