微信小程序 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 相关文章推荐
Javascript 日期处理之时区问题
Oct 08 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
详解Node.JS模块 process
Aug 31 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
快速配置PHPMyAdmin方法
2008/06/05 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
php实现快速排序法函数代码
2012/08/27 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
this和执行上下文实现代码
2010/07/01 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
[44:50]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第二局
2016/02/26 DOTA
python 获取et和excel的版本号
2009/04/09 Python
python实现图片识别汽车功能
2018/11/30 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
Tensorflow 定义变量,函数,数值计算等名字的更新方式
2020/02/10 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
机修工工作职责
2014/02/21 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
员工离职通知函
2015/04/25 职场文书
小学庆六一主持词
2015/06/30 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS