VPS参考测评推荐
专注分享VPS主机优惠信息
hostkvm优惠促销活动
zji优惠促销活动
衡天云优惠活动
亚马逊云aws.amazon.com最新优惠活动

如何使用小程序中的组件组件?实用指南分享(小程序组件组件)

locvps
主机参考:VPS参考测评推荐,专注分享VPS主机优惠信息!若您是商家也可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
部分文章发布时间较久远,可能存在未知因素,购买时建议在本站搜索商家名称,可查看相关文章充分了解商家!若非中文页面可使用谷歌浏览器同步翻译!PayPal代付/收录合作

如何使用小程序中的组件组件?下面这篇文章就和大家分享一下小程序自定义组件Component的实用指南,希望对你有帮助!

如何使用小程序中的组件组件?实用指南分享(小程序组件组件)

在小程序中,我们希望将页面中的功能模块抽象出来,在不同的页面中重用。我们可以使用它的定制组件,可以把复杂的页面拆分成多个低耦合的模块。这样不仅使用方便,也有助于我们的代码维护。【相关学习推荐:小程序开发教程】

前言:你将从这篇文章中获益。

小程序如何使用自定义组件?

自定义组件之间传递的各种值。

自定义组件中插槽的使用

扫雷,本文中的小程序指的是微信小程序(不过其他小程序应该也有类似的思路)

扫雷,本文主要内容是自定义组件的各种用法,不是教你如何封装组件!

准备一个基本的(可以忽略的)新文件夹。首先,在根目录中创建一个专用于定制组件的文件夹(文件夹名称和位置是任意的)。

1.png

创建一个新的组件文件,然后在applet编辑器中,右键单击并创建一个新组件。

2.png

为什么具体说这一步?

不知道有没有朋友和我一样,总是只用小程序开发工具作为预览工具,然后用其他编辑器进行开发。

3.png

后来发现直接在小程序中创建组件或者页面,会一口气把四个文件都建好,内容模板也会填写好。所以现在,除了预览开发者工具,我还用它来创建新文件。

4.png

例子描述:下面我们以下图中的模块划分标题为例,写一个简单的组件例子(只是盲例)。

5.png

如何引入自定义组件?创建就不多说了,比如上面的【新建一个组件文件】。如果您手动创建它,不要忘记在json文件中声明它(小程序开发工具的默认设置是new)

{ 组件 :true}引入组件方法

6.png

在页面的json文件中进行引用声明。

lt!--被引用组件的json文件-->:{ ;使用组件 :{ x-title ;: /components/title/title ;}}像基本组件一样在页面的wxml中使用自定义组件(名称和声明一致)

lt!被引用组件的-- wxml文件-->: lt;x-title gt; lt/x-title gt;怎么传值?你可以看到标题的内容在传递值给子组件的时候被父组件写死了,但是在实际操作中,我们肯定需要根据不同的模块传入不同的标题内容,所以需要使用父子之间传递的值。

父代将值传递给子代。

lt!--parent wxml -->: lt;x-title title text = ;所有订单" > lt/x-title gt; lt!--如果父代的值是变量,-->: lt;x-title title text = ;{ { currentTitle } } gt lt/x-title gt;子节点从父节点接收值。

lt!--子JS-->:属性:{ titleText:{ type:String,value: # 39;其他 # 39;} },7.png

子组件将值传递给父组件,稍微修改组件,并添加细节操作按钮。目前,已经通过循环获得了多个模块。现在,我想让孩子在单击细节时将当前模块的id传递给父母。

8.png

子组件将参数传递给父组件。

lt!--子wxml -->: lt;view class = title -操作 bindtap = gotoDetail gt详细信息:goto detail(){ this . triggerevent( # 39;gotoDetail # 39,this.data.titleId) }9.png

父组件接收子组件的参数。

lt!--parent wxml -->: lt;x-title title text = ;{ { item.title } } titleId = { { item.id } } bind:goto detail = ;gotoDetail gt lt/x-title gt; lt!--parent JS-->://获取参数goto detail(e){ const ID = e . detail console . log( # 39;从子组件收到的 # 39,id) }10.png

父组件调用子组件的方法。子组件定义了一个方法。

lt!--子JS-->:child method(){ console . log( # 39;我是子组件的方法 # 39;)},父组件先给子组件一个id。

lt!--parent wxml -->: lt;x-title id = ;titleCom gt lt/x-title gt; ltvan-按钮类型= 主要 bindtap = triggerChildMethod gt调用子组件方法

lt!--parent JS-->:on ready(){ this . title com = this . select component( ;# titleCom );},trigger child method(){ this . title com . child method();}11.png

在自定义组件中使用插槽。我们在上面的自定义组件中加入了【详情】的操作按钮,但是有些地方可能不想用文字,而是想改成图标或者按钮。当放置在某处的节点的内容不确定时,我们可以使用slot来处理。

12.png

单槽13.png

向部件添加插槽。

lt!--子wxml -->: lt;slot gt lt/slot gt;父级可以填充组件中的任何内容,比如插入图标(如果子级不添加slot,则填充时间的html不会被渲染)。

lt!--parent wxml -->: lt;x-title gt; ltview class = 操作-换行 gt ltvan-icon name = ;箭头 / gt; lt/view gt; lt/x-title gt;14.png

多插槽15.png

在子组件的js中打开多插槽支持。

lt!--子JS-->:Options:{ multiple slots:true//定义组件时在选项中启用多插槽支持}。向子组件添加插槽需要向插槽添加名称。

lt!--子wxml -->: lt;插槽名称= 图标 gt lt/slot gt; lt插槽名称= oper gt lt/slot gt;在父级使用

lt!--parent wxml -->: lt;view class = icon-wrapslot = 图标 gt ltvan-icon name = ;订单-o ;size = 24 / gt; lt/view gt; ltview class = 操作-换行 slot = oper gt ltvan-按钮类型= 主要 custom -style = ;{ { customStyle } } gt更大的

注:为什么加了槽,却没有反应?

17.png

虽然我只在[子组件]中添加了一个槽,但是因为添加的名称,我还需要在[子组件]的js中打开多个槽。

Options: {multipleSlots: true //定义组件时在Options中启用多插槽支持}、组件的生命周期组件({ lifetimes:{ attached:function(){//组件实例进入页面节点树时执行}、Detached: function() {//组件实例从页面节点树中移除时执行}、}、//组件所在页面的生命周期page lifetimes:{ show:function(){//页面显示}、Hide: function() {//页面隐藏}, resize: function(size) {//页面大小变化} }//下面是老式的定义方法,可以保持< 2.2.3兼容附:function() {//组件实例进入页面节点树时执行},detached: function() {//组件实例从页面节点树中移除时执行},// ...})更多编程相关知识请访问:编程视频!!以上就是如何在小程序中使用Component组件。实用指南分享详情请关注主机参考其他相关文章了解更多!

这几篇文章你可能也喜欢:

  • 暂无相关推荐文章

本文由主机参考刊发,转载请注明:如何使用小程序中的组件组件?实用指南分享(小程序组件组件) https://zhujicankao.com/77013.html

【腾讯云】爆款2核2G云服务器首年40元,企业首购最高获赠300元京东卡
打赏
转载请注明原文链接:主机参考 » 如何使用小程序中的组件组件?实用指南分享(小程序组件组件)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!