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

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

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

浏览器中,会显示 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-bindslot内容可以使用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 作用域插槽是一个非常简单的概念-让插槽内容可以访问子组件数据,这在设计出色的组件方面很有用处。 通过将数据保留在一个位置并将其绑定到其他位置,管理不同状态变得更加清晰。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 何时为何使用 Vue 的作用域插槽

发表评论

提供最优质的资源集合

立即查看 了解详情