位置: IT常识 - 正文

微信小程序 slot插槽基本使用(微信小程序slot)

编辑:rootadmin
微信小程序 slot插槽基本使用 文章目录前言一、基本插槽二、具名插槽三、样式:hoststyleIsolation可控化样式隔离externalClasses外部样式类使用页面/父组件的样式总结前言

推荐整理分享微信小程序 slot插槽基本使用(微信小程序slot),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序slot警告,微信小程序 slider,微信小程序slot标签,微信小程序slot传值,微信小程序 slot中 不解析标签,微信小程序slot警告,微信小程序 slot中 不解析标签,微信小程序slot传值,内容如对您有帮助,希望把文章链接给更多的朋友!

小程序中, 如果插槽有必要拿到父组件的数据来展示, 直接父传子即可, 和Vue一样的思路

一、基本插槽

参考Vue的基本插槽, 两者的使用思路相同. 子组件开一个<slot>标签表示插槽, 父组件直接在子组件标签之间写入要插入的内容, 这些内容就会自动插入到子组件的第一个基本插槽中, 注意是第一个, 就下面这个例子就可以看出:

<!-- 子组件.wxml --><view class="box"> <slot></slot> <!-- 基本插槽1 --> <view wx:for="{{list}}" wx:key="item" >{{item}}</view> <slot></slot> <!-- 基本插槽2 --></view>

虽然这里使用了多个插槽, 但是子组件js里加不加这段无所谓, 因为最终是只有一个插槽, 但是多个具名插槽就要加了, 不然所有具名失效:

//子组件.jsComponent({ options: { multipleSlots: true // 复数插槽: 是 }})

json里规定该目录下作为组件使用而非页面:

//子组件.json{ "component": true, //作为组件: 是 "usingComponents": {}}

不加也不会报错, 但所有插槽都是无效的.

之后在父组件里引入子组件:

//父组件.json{ "usingComponents": { "navbar": "../../components/NavBar/NavBar" }}<!-- 父组件.wxml --><navbar model:list="{{datalist}}"> <view> <text>slot啊</text> </view></navbar>

这个Navbar使用了弹性布局, 如果两个插槽均能成功插入, 那么navbar左右应当各有一个"slot啊". 自上而下解析, 只有第一个插槽被插入内容:

这点和Vue不同, 在Vue中出现多个基本插槽时, 父组件传入的内容会整体、完好的插入每一个插槽, 我在《Vue3 插槽使用详解》中做过详细演示. 个人感觉这样不是很好.

二、具名插槽

和Vue的具名插槽很像(怎么又像…), 至少使用上很像. 使用name属性在子组件里给插槽起名, 父组件进行内容插入时使用slot属性指定这部分内容要插入哪个插槽:

<!-- 子组件wxml --><view class="box"> <slot name="before"></slot> <view wx:for="{{list}}" wx:key="item">{{item}}</view> <slot name="after"></slot></view>

1个以上具名插槽就一定要加这个了:

//子组件.jsComponent({ options: { multipleSlots: true // 在组件定义时的选项中启用多 slot 支持 }})

然后到父组件引入试一下:

<navbar model:list="{{datalist}}"> <view slot="before"> <text>slot:before</text> </view> <view slot="after"> <text>slot:after</text> </view></navbar>

看下效果, 一个在Navbar主体前, 一个在navbar主体后:

微信小程序 slot插槽基本使用(微信小程序slot)

emmm… 突然有个疑问, 要是把两个兄弟元素都规定插入同一个插槽, 会出现什么情况? 会按序插入, 还是我想的那样直接覆盖呢… 父组件分两次传给before插槽试一下:

<!-- 父组件.wxml --><navbar model:list="{{datalist}}"> <view slot="before"> <text>slot:before |</text> </view> <view slot="before"> <text>slot:after</text> </view></navbar>

可见并不会覆盖, 而是按照传入的先后顺序依次排列, 相当于一次性传入.

三、样式

组件现在可以设置自己内部的默认样式了, 按照Vue的思想, 即便向组件插槽内传入内容, 组件的样式也不会影响到插槽内容的样式, 但是现在这种隔离变得更加可控.

:host

通过wxss选择器:host实现规定当前子组件内的默认样式, 并且可以影响到传入子组件插槽的内容: 举例:

/* 子组件.wxss */.active { /* 活跃的navbarItem字体为亮绿色 */ color: lightgreen;}/* 组件内所有文字默认粉色 */:host { color: pink;}

然后我们还是用具名插槽传那俩值, 看下效果, 此时"衣服"选项活跃:

styleIsolation可控化样式隔离

允许直接开发者直接控制父子组件之间的样式分享规则; 直接放在子组件json里使用, 就像这样:

{ "component": true, "usingComponents": {}, "styleIsolation": "shared"}属性说明“styleIsolation”: “isolated”启用样式隔离, 父子组件互不影响(默认)“styleIsolation”: “apply-shared”父组件样式将影响子组件, 但子组件不影响父组件“styleIsolation”: “shared”分享, 互相影响

就拿"styleIsolation": "shared"举个例子, 我在父组件的WXSS中, 指定一个子组件元素的样式:

/* 父组件WXSS, 子组件中类名为box的元素 */.box { background-color: yellow;}<!-- 子组件 --><view class="box"> <slot name="before"></slot> <!-- 略 --> <slot name="after"></slot></view>

externalClasses外部样式类

将子组件内部元素的类名暴露, 允许在父组件内传入子组件内部元素类名. 比如子组件里有个长100px宽100px的div, 使用外部样式类可以做到由父组件传入一个类名, 实现父组件类名设置为子组件div的样式.

//子组件Component({ externalClasses: ['my-class']})<!-- 子组件 --><view class="my-class">这段文本的颜色由组件外的 class 决定</view>/* 父组件样式 */.red-text { color: red;}<!-- 父组件 --><my-component my-class="red-text" />

当然也可以看到, 在子组件内部这就是一个普通的类名, 那么是不是也可以在子组件wxss里使用它呢:

在既由外部传入又有自身样式的情况下, 样式类的优先级是未被定义的, 也就是说会出现覆盖情况?那么是个别样式的覆盖还是对于整个样式类的覆盖呢, 我试了一下: 根据结果来看, 其实只要将一个子组件类名指定为externalClasses, 它就不可再作为普通类名使用, 而且原因应该也不是产生了样式类覆盖, 因为父组件不给子组件传类名的情况下, 被指定为externalClasses的类名也不可以作为普通类名使用, 它根本不生效:

<view class="my-class">子组件</view>//子组件js, 将my-class指定为externalClasses.Component({ externalClasses: ['my-class']})/* 子组件样式 */.my-class { height: 100px; width: 100px; color: yellow; background-color: aqua;}

然后直接来看父组件不传类名的情况:

<!-- 父组件中引入的子组件 --><my-component />

可以明显看到的是没有颜色, 说明即便父组件不传入类名, my-class也不再能作为普通类名使用了.

使用页面/父组件的样式

在配置了父子组件存在样式隔离的情况下, 出现子组件需要使用父组件或页面的样式类的需求, 可以使用这个. 通过在类名添加步骤进行一些额外操作来完成:

<!-- 使用引入页面的类 --><view class="~blue-text"> 这段文本是蓝色的 </view><!-- 使用父组件的类 --><view class="^red-text"> 这段文本是红色的 </view>总结

还好有用过Vue, 学起来比较清晰. 文档最下面还有一个虚拟化组件节点, 这个本文没有提到.

本文链接地址:https://www.jiuchutong.com/zhishi/297328.html 转载请保留说明!

上一篇:实用工具推荐,浏览器必备宝藏插件:Wetab新标签页(实用工具书推荐)

下一篇:JavaScript | 1000个判断条件难道要写了1000个 if ? 一文教你如何实现分支优化

  • 电脑忘记开机密码怎么办教你解决(电脑忘记开机密码怎么办)(电脑忘记开机密码开不了机怎么办)

    电脑忘记开机密码怎么办教你解决(电脑忘记开机密码怎么办)(电脑忘记开机密码开不了机怎么办)

  • 红米k40游戏增强版充电多久充满(红米k40游戏增强版最严重缺点)

    红米k40游戏增强版充电多久充满(红米k40游戏增强版最严重缺点)

  • hisense电视投屏功能在哪(hisense电视投屏设置在哪)

    hisense电视投屏功能在哪(hisense电视投屏设置在哪)

  • 小米10充满电需要多长时间呢(小米10冲满电要多久)

    小米10充满电需要多长时间呢(小米10冲满电要多久)

  • 抖音连麦需要什么条件(抖音连麦什么套路)

    抖音连麦需要什么条件(抖音连麦什么套路)

  • 三星s8无法下拉通知栏(三星s8屏幕下拉不了怎么办)

    三星s8无法下拉通知栏(三星s8屏幕下拉不了怎么办)

  • 怎样取消点赞微信封面(怎么取消点赞微信)

    怎样取消点赞微信封面(怎么取消点赞微信)

  • 第三方代充是什么意思(什么叫第三方代充)

    第三方代充是什么意思(什么叫第三方代充)

  • 荣耀30pro带无线充电吗(荣耀30pro 无线)

    荣耀30pro带无线充电吗(荣耀30pro 无线)

  • ios可以降系统么(苹果可以不可以降系统)

    ios可以降系统么(苹果可以不可以降系统)

  • 误触光猫wps按键(移动光猫按了wps键就没网了)

    误触光猫wps按键(移动光猫按了wps键就没网了)

  • 什么可以代替手指触屏(什么可以代替手机触屏笔)

    什么可以代替手指触屏(什么可以代替手机触屏笔)

  • iphone删除照片后储存空间没变(iPhone删除照片后还能恢复吗)

    iphone删除照片后储存空间没变(iPhone删除照片后还能恢复吗)

  • 苹果电脑自带的ppt叫啥(苹果电脑自带的软件可以删除吗)

    苹果电脑自带的ppt叫啥(苹果电脑自带的软件可以删除吗)

  • 为什么摇一摇都是很远的人(为什么摇一摇都是男的)

    为什么摇一摇都是很远的人(为什么摇一摇都是男的)

  • 计算机off代表什么(计算机off表示什么)

    计算机off代表什么(计算机off表示什么)

  • 天猫榜单在哪里查看(天猫榜单怎么弄出来)

    天猫榜单在哪里查看(天猫榜单怎么弄出来)

  • volet高清通话是什么(volete高清通话)

    volet高清通话是什么(volete高清通话)

  • 苹果x换屏怎么恢复原彩(苹果x换屏怎么分辨原装)

    苹果x换屏怎么恢复原彩(苹果x换屏怎么分辨原装)

  • 为什么qq老是有新号加我(为什么qq老是有条件查找的人加我)

    为什么qq老是有新号加我(为什么qq老是有条件查找的人加我)

  • 苹果手机的airplay在哪里设置(苹果手机的airplay在哪里打开)

    苹果手机的airplay在哪里设置(苹果手机的airplay在哪里打开)

  • 淘金币过期日期怎么看(淘金币什么时候过期怎么查看)

    淘金币过期日期怎么看(淘金币什么时候过期怎么查看)

  • 华为nova2s怎么隐藏应用(华为nova2s怎么隐藏游戏)

    华为nova2s怎么隐藏应用(华为nova2s怎么隐藏游戏)

  • 【目标检测】YOLOV1详解(目标检测yolov5)

    【目标检测】YOLOV1详解(目标检测yolov5)

  • 企业签订技术培训合同是否需要缴纳印花税?
  • 未到账的银行存款怎么取
  • 金税四期如何应对
  • 公司资料更新
  • 社保的滞纳金算是社保里的吗
  • 资产减值损失有二级科目吗
  • 土地储备机构也称为什么
  • 注册资本印花税计入哪个科目
  • 租赁厂房算什么费用
  • 出口发票开具注意事项及要求有哪些?
  • 劳务报酬个人所得税怎么计算
  • 通发票备注栏写什么内容
  • 小规模纳税人应纳税额的计算
  • 自来水费缴纳后多久来水
  • 个体户怎么申请核定征收
  • 企业的主营业务收入
  • 加计扣除农产品进项税额
  • 办税员不能领用发票是怎么回事
  • 税金及附加包括地方教育费附加吗
  • 对方已认证的发票在哪里
  • 收到融资租赁发票怎么做账
  • linux如何将命令结果输出到文件
  • pb估值是什么意思
  • 货币资金资产处置损益表如何填
  • 所得税汇算清缴后如何调整报表
  • rapimgr.exe - rapimgr进程是什么文件.有哪些作用
  • 报销租房费用开发票
  • 购买电子承兑差额怎么算
  • set up 和establish的区别
  • 企业购入固定资产要交印花税吗
  • PHP:imagedashedline()的用法_GD库图像处理函数
  • 企业年金如何缴纳计算方法
  • zabbix 执行命令
  • 班迪录屏软件录制框怎样在ppt上一直指定
  • 论文导读怎么做
  • 两个公司可以是法人吗
  • 加权平均资本结构
  • 税控盘全额抵扣政策
  • 所得税费用该怎么算
  • 存货跌价准备的账务处理
  • 如何访问一台网络上的电脑
  • 软件即征即退开票信息与资料不符
  • 融资租赁期间的维修费由谁承担
  • 开具红字专用发票理由
  • 原材料报废卖掉会计分录
  • 税务评估价多久更新一次
  • 车保险里面的车船税
  • 供货商少开发票如何记账?
  • 账户外币转人民币
  • 工业企业固定资产投资
  • 建立明细账的注意事项
  • mysql表字段设置默认值
  • mysql版本信息
  • 通过SQLSERVER重启SQLSERVER服务和计算机的方法
  • window如何恢复系统
  • windowsxp锁屏密码怎么设置
  • 一键ghost还原备份
  • winxp共享打印机win11
  • win2008远程桌面
  • kdeskcore.exe是什么
  • opengl教程48讲
  • jquery 瀑布流
  • 创建一个css文件
  • node.js教程详细
  • shell脚本详解
  • 变量代码是什么
  • unity游戏开发常用技术
  • jquery控制滚动条位置
  • 利用pm2部署多个设备
  • Express + Session 实现登录验证功能
  • 利用python中的scikit-learn对疫情数据挖掘
  • javascript flash下fromCharCode和charCodeAt方法使用说明
  • jquery教程chm
  • 税务总局副局长饶
  • 如何将个税人员信息改为非正常
  • 江西省电子税务局公众查询
  • 10月份税务申报
  • 广东省地方税务局电子办税服务厅
  • 政府收回土地条件
  • 耕地占用税应该什么时候交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设