微信小程序 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 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
js实现自定义滚动条的示例
Oct 27 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
IE/FireFox具备兼容性的拖动代码
2007/08/13 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
python2.7安装图文教程
2018/03/13 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
毕业生护理专业个人求职信范文
2014/01/04 职场文书
家长对老师的感言
2014/03/11 职场文书
《春晓》教学反思
2014/04/20 职场文书
倡议书的写法
2014/08/30 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
前台接待员岗位职责
2015/04/15 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS