本篇文章带大家详细了解一下vue的作用域插槽。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
Vue插槽是一种将内容从父组件注入子组件的绝佳方法。（学习视频分享：vue）
下面是一个基本的示例，如果我们不提供父级的任何slot位的内容，刚父级中的内容就会作为后备内容。
// ChildComponent.vueFallback Content
登录后复制
然后在我们的父组件中:
立即学习“前端免费学习笔记（深入）”；
// ParentComponent.vue Override fallback content
登录后复制
编译后，我们的DOM将如下所示。
Override fallback content
登录后复制
我们还可以将来自父级作用域的任何数据包在在 slot 内容中。 因此，如果我们的组件有一个名为name的数据字段，我们可以像这样轻松地添加它。
{{ text }} export default { data () { return { text: 'hello world', } }}
登录后复制
【相关推荐：vue】
为什么我们需要作用域插槽
我们来看另一个例子，假设我们有一个ArticleHeader组件，data 中包含了一些文章信息。
// ArticleHeader.vue{{ info.title }}export default { data() { return { info: { title: 'title', description: 'description', }, } },}
登录后复制
我们细看一下 slot 内容，后备内容渲染了 info.title。
在不更改默认后备内容的情况下，我们可以像这样轻松实现此组件。
// ParentComponent.vue
登录后复制
在浏览器中，会显示 title。
虽然我们可以通过向槽中添加模板表达式来快速地更改槽中的内容，但如果我们想从子组件中渲染info.description，会发生什么呢?
我们想像用下面的这种方式来做：
// Doesn't work!{{ info.description }}
登录后复制
但是，这样运行后会报错 ：TypeError: Cannot read property ‘description’ of undefined。
这是因为我们的父组件不知道这个info对象是什么。
那么我们该如何解决呢？
引入作用域插槽
简而言之，作用域内的插槽允许我们父组件中的插槽内容访问仅在子组件中找到的数据。 例如，我们可以使用作用域限定的插槽来授予父组件访问info的权限。
我们需要两个步骤来做到这一点：
使用v-bind让slot内容可以使用info在父级作用域中使用v-slot访问slot属性
首先，为了使info对父对象可用，我们可以将info对象绑定为插槽上的一个属性。这些有界属性称为slot props。
// ArticleHeader.vue{{ info.title }}
登录后复制
然后，在我们的父组件中，我们可以使用和v-slot指令来访问所有的 slot props。
// ParentComponent.vue
登录后复制
现在，我们所有的slot props,（在我们的示例中，仅是 info）将作为article对象的属性提供，并且我们可以轻松地更改我们的slot以显示description内容。
// ParentComponent.vue{{ article.info.description }}
登录后复制
最终的效果如下：
总结
尽管Vue 作用域插槽是一个非常简单的概念-让插槽内容可以访问子组件数据，这在设计出色的组件方面很有用处。 通过将数据保留在一个位置并将其绑定到其他位置，管理不同状态变得更加清晰。
原文地址：https://learnvue.co/2021/03/when-why-to-use-vue-scoped-slots/作者：Ashish Lahoti译文地址：https://segmentfault.com/a/1190000039801512
更多编程相关知识，请访问：vue！！
以上就是为什么使用vue的作用域插槽？什么时候使用？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3020400.html
