插槽Slots及具名插槽实现组件高定制化

于 2024-09-01 20:46:15 发布
阅读量275 收藏 3
点赞数 8
分类专栏： uniapp vue3 文章标签： vue 前端 vue.js uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MuYuZiBuYan/article/details/141788698
版权

       Slots

        在正常情况下组件我们分为头部组件、主体组件、底部组件等组成。头部与底部一般情况下是统一的只有主体不一样。

        基于此我们可以把中间的主体内容提取出来当需要显示demo1的页面是显示demo1的页面需要demo时显示demo2。我们把整个页面(包括头部与底部)看做一个组件然后设置一个位置Slots就是位置。

        Slots用法流程

        1.首先在components组件中创建layout页面组件

        2.在demo1,与demo2中引用 layout 组件

        3.因为demo1和demo2只有主体不同所以在组件 layout 的主体 main 标签中添加 slot 关键字，并且预留位置

        4.随后就能直接在demo1与demo2中直接写入内容就行 ，不同页面不同的内容

        5.当不同的页面头部需要高定制化后也可以使用slots,但是当头部也添加 slot 之后会发生分不清在那个slot 添加内容如图：

        6.因为以上原因所以 slot 提供了具名插槽

        7.当slot添加了添加了具名插槽引用时也要添加 

 

 

 

木与子不厌
关注
专栏目录
vue中具名插槽slot使用详细教程版
jieweiwujie的博客
09-07 682
vue中具名插槽slot使用详细教程版
Vue作用域插槽实现方法及作用详解
11-19
2. **增强可定制性：**通过作用域插槽，父组件可以根据需要对子组件内部的数据进行格式化或展示，提高了组件的灵活性。 3. **代码解耦：**由于父组件可以控制子组件的数据呈现方式，子组件不必关心具体的显示逻辑，...
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
10-15
主要介绍了vue 使用插槽分发内容操作,结合实例形式总结分析了vue.js使用单个插槽、具名插槽、作用域插槽相关操作技巧与注意事项,需要的朋友可以参考下
slot【具名插槽】
weixin_43837268的博客
01-18 673
1.home.vue <template> <div class="father"> <h3>这里是父组件</h3> <child> <div class="tmpl" slot="up"> <span>
具名插槽 slot使用
qq_36775019的博客
01-12 840
1.普通的子组件插槽 //Children.vue <div> <slot></slot> </div> 使用 <Children> <span>123</span> </Children> 2.具名插槽 //Children.vue <div> <span>123</span> <slot name="content"></slot> &l
vue之组件插槽slot、具名插槽
john的博客
07-22 235
利用slot传div标签、dom传递 const app = Vue.createApp({ data(){ return{ message:'hello world', num: 1235 } }, template:` <div> <myform> <div>提交</div> </my
具名slot插槽使用
weixin_48508049的博客
04-14 211
具名slot插槽使用 首先搞个页面放插槽用 <template> <div> <div> <h2>这是上部</h2> //放两个插槽，名字分别为a1跟a2 <slot name="a1"></slot> <slot name="a2"></slot> <h2>这是下部</h2> </div&g
vue slots 组件的组合/分发实例
10-18
在这个例子中，`slot1`和`slot2`是两个具名插槽，它们分别接收父组件传入的`child-component`和`div`内容。如果`slot`没有被使用，那么`<slot>`标签内的默认内容将会显示。 注意，每个父组件的`slot`名称必须是唯一...
匿名插槽,具名插槽,作用域插槽的区别
最新发布
08-09
这意味着只有直接包含它的父组件可以访问这个插槽，增强了封装性和定制化能力。 总的来说，匿名插槽适合简单的情况，具名插槽提供了一定程度的灵活性，而作用域插槽则适用于更复杂、需要高度自定义的场景。通过合理...
vue使用插槽分发内容slot的用法 之 具名slot的用法
王小森的成长博客
07-19 2944
具名slot的用法。
Vue初学22-具名插槽（slot）的使用-标题导航栏为例
04-22
Vue初学22-具名插槽（slot）的使用-标题导航栏为例的两个图标，Vue初学22-具名插槽（slot）的使用-标题导航栏为例的两个图标
Vue中slot的使用(具名插槽与作用域插槽)
CherishTaoTao的博客
06-14 4085
本篇文章简单介绍具名插槽及作用域插槽的使用1、插槽就是子组件中的提供给父组件使用的一个占位符，在子组件中用< slot>< /slot > 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的< slot>< /slot >标签。（简单来说就是在子组件中挖个坑让别人来跳） 2、在 2.6.0 版本之后，slot 以及 slot-scope 由 v-slot 统一替代。 3、插槽包括默认插槽、具名插槽和作用域插槽 三、具名插槽的使用 1.子组件配置slot 在子组件中
vue：匿名slot、具名slot、作用域slot（技术栈Vue3 + TS）
snowball的博客
03-12 4556
1.1、对于开发可扩展组件非常有用，特别是大型项目；1.2、匿名slot 适用于只插入一个的时候；1.3、具名slot 可清晰的插入多个slot，按name匹配使用；1.4、在slot的内部可以将值通过有名slot传递出去，让外层组件接收，常用于表格展示；
Vue.js--作用域、slot用法（单个slot、具名slot）详解
吴声子夜歌的博客
10-13 1239
作用域 在介绍slot前，需要先知道一个概念：编译的作用域。比如父组件中有如下模板： <child-component> {{message}} <child-component> 这里的message就是一个slot，但是它绑定的是父组件的数据，而不是组件< child-component >的数据。 父组件模板的内容是在父组件作用域内编译，子组件模板的内...
vue的slot（slot具名插槽。slot非具名插槽，slot的作用域，）
ljljlj1993的博客
05-21 2026
vue的slot 1、什么是slot slot是插槽，插即是可以插入，槽就是坑，即是可以再代码中插入 如果子组件模板中不包含插口，那么父组件的内容将会被丢弃。当子组件模板中有一个么有属性的插槽时，父组件传入的整个内容片段，将插入到插槽所在的dom的位置，并替换掉插槽标签本身。 举例： <html> <head> <meta charset="utf-8">...
Vue.js中的插槽slot(具名插槽、作用域插槽)详解
YSJ_chengnan的博客
07-15 1433
Vue中的插槽slot插槽 - slot1.插槽的基本使用2.具名插槽的使用3.作用域插槽 插槽 - slot 优点：可以预留空间，提高组件的复用性； 1.插槽的基本使用 html代码如下： <div id="app"> <!--将h4标签中的内容替换到插槽中 --> <you><h4>替换的h4标签</h4></you> <!--不在插槽中添加值时，插槽会使用默认值 --> <you></yo
Vue使用具名插槽细节
奥巴牛的博客
09-22 9399
<slot>元素可以用一个特殊的属性 name来配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。 仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。
vue中子组件插槽$slots
07-28
Vue中的插槽（slots）是一种用于在父组件中向子组件传递内容的机制。插槽允许父组件在子组件的特定位置插入任意内容。子组件可以定义一个或多个插槽，并且父组件可以在使用子组件时向这些插槽中传递内容。 在子组件中，使用`<slot></slot>`标签定义插槽的位置。父组件可以在使用子组件时，使用具名插槽或默认插槽向这些位置传递内容。 具名插槽可以通过在子组件的`<slot>`标签上添加`name`属性来定义。例如，在子组件中定义了一个名为`header`的具名插槽，可以使用`<template v-slot:header>`或`<template #header>`来传递内容给该插槽。 默认插槽是子组件中未命名的插槽，在父组件中使用子组件时，可以直接将内容放置在子组件的标签之间，这些内容将会被传递给默认插槽。 在父组件中，可以通过`$slots`对象来访问子组件的插槽。`$slots`对象包含了每个插槽的内容，可以通过插槽的名称来访问相应的内容。例如，`$slots.header`可以访问子组件中名为`header`的插槽的内容。 需要注意的是，如果子组件没有定义插槽，则父组件在使用时传递的内容将会被忽略。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值