组件：slot插槽-作用域插槽

满天飞飞 2023-01-12 23:12:05

课时名称	课时知识点
组件：slot插槽-作用域插槽

...全文

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

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

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

一.slot 插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。值得注意的是：内容要写在父组件中，然后分给需要的子组件，当slot多个时，可以通过name来加以区分，这就是所谓的具名插槽。举个例子父组件：这是父组件实践slot 实践具名slot 子组件：这是子组件效果：二.slot-scope slot-scope就是作用域插槽。官方叫它作用域插槽，实际上，对比具名插槽，我们可以叫它带数据的插槽。具名插槽在组件的templat

Vue学习篇(二)：slot-scoped作用域插槽的使用 作用域插槽是slot一个比较难理解的点，而且官方文档说的又有点不清晰。这里，我们用一句话对其做一个总结，然后在后续案例中来体会：父组件替换插槽标签，但是内容由子组件来提供父组件中通过slot插槽控制子组件要渲染内容，组件1渲染姓名与年龄，组件2渲染姓名与爱好 <template> <div class="hello"> <!-- 通过 :data 绑定子组件的中的list数据， data

原文网址：简介说明本文用示例说明Vue的插槽（v-slot）的用法。包括：普通插槽，作用域插槽等。官网插槽 — Vue.js 普通插槽说明 vue 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)，它取代了 slot 和 slot-scope，这两个在vue2.6.x中已被废弃但未被移除。vue 3 中， slot 和 slot-scope会被直接移除。写法 v-slot有不同的写法。具名插槽父组件：&...

1. 插槽的作用：如果没有在组件模板中放置插槽<slot>，则在html 代码中组件自定义元素之间的内容将不显示; 如果在组件模板中设置插槽<slot>，则相当于，在组件中提前预留了位置，给在html 代码中组件自定义元素之间的内容放置。即使vue 组件被封装好了不再改动，也可以在html 层面上，在自定义元素之间增加内容或者设置样式等操作。详见：插槽的作用 ...

刘湘宇的课程社区_NO_1

1

社区成员

53

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

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

+ 用AI写文章