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

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

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

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

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

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

自定义组件中插槽的使用

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

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

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

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

为什么具体说这一步？

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

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

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

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

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

在页面的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；} },

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

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

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

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

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) }

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

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()；}

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

单槽

向部件添加插槽。

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；

多插槽

在子组件的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更大的

注:为什么加了槽，却没有反应？

虽然我只在[子组件]中添加了一个槽，但是因为添加的名称，我还需要在[子组件]的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