微信小程序 slot踩坑的解决
更新时间：2019年04月01日 12:04:42 作者：Az_dxx
这篇文章主要介绍了微信小程序 slot踩坑的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
今天在使用微信小程序 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字符串截取方法总结(slice、substring、substr等)
在开发中常常会需要截取字符串,而 JavaScript 提供了很多种方法实现截取操作,本文对各种方法做个整理,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下2024-01-01
一直以来，对于JavaScript 中的this的理解都是很模糊的， 特别是对函数进行apply 与 call 调用。这两个操作如果没有很好的理解 JavaScript中this的概念，会越搞越迷糊。2009-07-07
这篇文章主要为大家详细介绍了js仿手机页面文件的下拉刷新,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要为大家详细介绍了bootstrap学习笔记之css样式设计，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
因为要做一个日历控件,遇到国家法定节假日,怎么实现此功能呢?这篇文章主要给大家介绍了关于前端判断节假日的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-08-08
在Web开发中,处理图片、字体等资源文件是一个常见的需求,传统的做法是将这些资源文件放在静态目录中,然后在HTML或CSS中引用,然而,这种方法在构建工具（如Webpack）中并不总是最理想的,为了解决这个问题,可以使用url-loader,需要的朋友可以参考下2025-04-04
如果我们希望在页面引入图片。当我们基于webpack进行开发时，引入图片会遇到一些问题，这篇文章主要介绍了webpack之引入图片的实现及问题，非常具有实用价值，需要的朋友可以参考下2018-10-10
下面小编就为大家带来一篇Js操作DOM元素及获取浏览器高宽的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
这是我在给库中添加事件的时候写的添加事件的方法！这个方法实现了跨浏览器之间的方法！2009-02-02
本文主要javascript实现用户点击数量统计的方法进行详细介绍，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
最新评论