微信小程序 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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
javascript  Error 对象 错误处理
May 18 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 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
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
Bootstrap Table列宽拖动的方法
2018/08/15 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
Python转换HTML到Text纯文本的方法
2015/01/15 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
win10系统下python3安装及pip换源和使用教程
2020/01/06 Python
python中Mako库实例用法
2020/12/31 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
项目合作协议书
2014/09/23 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
文明班级申报材料
2014/12/24 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL