关于javascript:何时何地使用-Vue-的作用域插槽

5次阅读

共计 2454 个字符，预计需要花费 7 分钟才能阅读完成。

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

点赞再看，微信搜寻【大迁世界】,B 站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。**

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。

尽管咱们能够通过向槽中增加模板表达式来疾速地更改槽中的内容，但如果咱们想从子组件中渲染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>

最终的成果如下：

只管 Vue 作用域插槽是一个非常简单的概念 - 让插槽内容能够拜访子组件数据，这在设计杰出的组件方面很有用途。通过将数据保留在一个地位并将其绑定到其余地位，治理不同状态变得更加清晰。

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

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://learnvue.co/2021/03/w…

文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复福利，即可看到福利，你懂的。

正文完