微信小程序 slot踩坑的解决


Posted in Javascript onApril 01, 2019

今天在使用微信小程序 component 里的 slot 时发现,当只用一个 slot 并且将 slot 命名后,页面中调用这个 slot 并不会加载进来。

研究尝试后发现,如果想要使用命名的方式调用单个 slot ,也需要像调用多个 slot 的方式 在 component/xxx.js 里开启多个 slot 的功能。下面看代码。

// component
<view class='slot'>
 <view>哈哈哈哈哈哈哈哈</view>
 <slot name="after"></slot>
</view>

// index 页面
<d-slot>
  <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
  <view slot="after">这里是插入到组件slot name="after"中的内容</view>
</d-slot>

//结果,此时界面上不会载入 slot

而当我把 slot 的name 删去时,slot 就能成功载入

// component
<view class='slot'>
 <view>哈哈哈哈哈哈哈哈</view>
 <slot></slot>
</view>

// index 页面
<d-slot>
  <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
  <view>这里是插入到组件slot name="after"中的内容</view>
</d-slot>

//结果,此时界面上载入 slot

或者不删去 name 而是在组件js中声明启用

// component.js
Component({
 options: {
 multipleSlots: true // 在组件定义时的选项中启用多slot支持
 },
 properties: { /* ... */ },
 methods: { /* ... */ }
})

// component
<view class='slot'>
 <view>哈哈哈哈哈哈哈哈</view>
 <slot name="after"></slot>
</view>

// index 页面
<d-slot>
  <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
  <view slot="after">这里是插入到组件slot name="after"中的内容</view>
</d-slot>

//结果,此时界面上载入 slot

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
Aug 14 Javascript
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
JavaScript实现点击自制菜单效果
Feb 02 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 #Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 #Javascript
详解JavaScript中的函数、对象
Apr 01 #Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 #Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 #Javascript
基于elementUI实现图片预览组件的示例代码
Mar 31 #Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 #Javascript
You might like
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
2017/05/24 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
python使用Matplotlib画饼图
2018/09/25 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python多进程并行代码实例
2019/09/30 Python
Pycharm中如何关掉python console
2020/10/27 Python
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
澳大利亚商务邀请函
2014/01/17 职场文书
打架检讨书100字
2014/01/19 职场文书
医药营销个人求职信范文
2014/02/07 职场文书
烹饪自我鉴定
2014/03/01 职场文书
目标责任书范文
2014/04/14 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
如何通过一篇文章了解Python中的生成器
2022/04/02 Python
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL