文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

使用vue的作用域插槽的原因是什么?

2023-06-14 18:45

关注

这篇文章主要介绍了使用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

使用vue的作用域插槽的原因是什么?

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

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

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

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

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

那么我们该如何解决呢?

引入作用域插槽

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

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

首先,为了使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的作用域插槽的原因是什么?

总结

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

以上就是使用vue的作用域插槽的原因是什么的详细内容了,看完之后是否有所收获呢?如果想了解更多相关内容,欢迎来编程网行业资讯!

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯