作用域插槽

MagnumHou 2023-03-03 11:28:09

课时名称	课时知识点
作用域插槽	作用域插槽作用域插槽作用域插槽作用域插槽

...全文

86 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

是vue插槽思维导图源文件，内容有：vue插槽，具名插槽，默认插槽，作用域插槽，插槽prop 定义：让子组件接收不同的标签结构显示。（即：子组件挖坑，父组件决定坑里放什么内容）渲染顺序：取决于模板，不取决于父组件中元素的顺序

Vue 插槽全解析：默认、具名、条件、动态与作用域插槽实例探秘

作用域插槽不是那么直观的一个概念。Vue文档使用了一段描述性的话来解释作用域插槽：有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽 …… 但是在我们应用的某些部分，我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西。这也是作用域插槽的用武之地。但在我看来，至少是第一次读到的时候，这段话相当不好理解。插槽不是分发内容到子组件吗，为什么还要从子组件中获取数据？不是已经有了通过emit事件的方法从子组件向父组件传递数据吗，为什么需要它？作用域插槽到底是来干嘛的？…… 在浏览了不少博客、自己思考“如果不这么做，就会怎么样”再动手实践之后，作用域插槽的含义才逐渐明了

作用域插槽是一种特殊的插槽，它能够接收来自父组件的数据，并在子组件中使用。在Vue2中，作用域插槽是通过slot-scope实现的，而在Vue3中，作用域插槽是通过v-slot实现的。通过本文的介绍，我们了解了作用域插槽的定义、使用场景以及实际应用。作用域插槽是Vue3中非常重要的一个特性，它能够大大提高组件的复用性和灵活性。作为Vue3高级开发工程师，我们需要深入了解作用域插槽的使用方法，并在实际应用中灵活运用。

一、概念 // 有name的属于具名插槽，没有name属于匿名插槽 <app> <div slot="a">xxxx</div> <div slot="b">xxxx</div> </app> <slot name="a"></slot> <slot name="b"></slot> 普通插槽渲染的位置是在它的父组件里面，而不是在子组件里面 作用域插槽渲染是在子组件里面 1

橙汐工作室

3

社区成员

332

社区内容

发帖

与我相关

我的任务

vue.js前端框架html5 企业社区天津·河西区

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

核心使命：为IT从业者和技术爱好者提供一个优质的学习、交流和分享平台，促进技术创新和成长。
注意事项：请保持尊重、友善的交流环境，遵守社区规则，禁止发布违法、侵权、低俗或有害信息。
激励机制：为了鼓励积极参与社区的用户，我们会设置积分和勋章系统，支持高质量的原创内容和有益的互动。
感谢您的加入，期待与您一起在CSDN社区共同探索技术，交流经验，共同成长！

试试用AI创作助手写篇文章吧

+ 用AI写文章