微信小程序 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 相关文章推荐
JS backgroundImage控制
May 19 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
基于复选框demo(分享)
Sep 27 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
浅谈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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
总结PHP中DateTime的常用方法
2016/08/11 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
2013/08/02 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
vue制作toast组件npm包示例代码
2020/10/29 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
Python的类实例属性访问规则探讨
2015/01/30 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
css3 中实现炫酷的loading效果
2019/04/26 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
生日宴会策划方案
2014/06/03 职场文书
启动仪式策划方案
2014/06/14 职场文书
班级出游活动计划书
2014/08/15 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python