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

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

在一个小程序中，如果我们想把一个页面中的功能模块抽象出来，在不同的页面中重用，可以使用它的自定义组件，它可以把一个复杂的页面拆分成几个低耦合的模块，不仅使用方便，而且有助于我们的代码维护。【相关学习推荐:小程序开发教程】

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

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

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

自定义组件中插槽的使用。

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

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

基础准备(可以忽略)添加文件夹首先在根目录下创建一个文件夹放自定义组件(文件夹名称任意，位置任意)。

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

为什么专门说这一步？

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

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

示例背景描述我们将编写一个简单的组件示例(只是一个盲例)，其模块划分标题类似于下图中的示例。

如何引入自定义组件？没有太多需要创建的，比如上面的【新建组件文件】。如果手动创建，不要忘记在json文件中声明它(小程序开发工具默认提供)。

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

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

& lt！引用组件-->的-- json文件；{ & quot使用组件& quot:{ & quotx-title & quot；:& quot/components/title/title & quot；}}像基本组件一样在页面的wxml中使用自定义组件(名称和声明一致)。

& lt！引用组件-->的-- wxml文件；& ltx-title & gt；& lt/x-title & gt；怎么传值？当父组件把值传递给子组件的时候，我们可以看到上面已经把标题内容写死了，但是实际操作中，我们肯定需要根据不同的模块传入不同的标题内容，所以需要使用父子之间传递的值。

父母把价值观传递给孩子。

& lt！--parent wxml -->；& ltx-title title text = & quot；所有订单" >& lt/x-title & gt；& lt！--如果父代的值是变量，-->；& ltx-title title text = & quot；{ { currentTitle } } & quot& gt& lt/x-title & gt；子节点接收父节点传递的值。

& lt！--子JS-->；属性:{ titleText:{ type:String，value:& amp；#39;其他& amp # 39} },

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

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

& lt！--子wxml -->；& ltview class = & quottitle -操作& quotbindtap = & quotgotoDetail & quot& gt细节；goto detail(){ this . triggerevent(& amp；#39;gotoDetail & amp#39;，this.data.titleId) }

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

& lt！--parent wxml -->；& ltx-title title text = & quot；{ { item.title } } & quottitleId = & quot{ { item.id } } & quotbind:goto detail = & quot；gotoDetail & quot& gt& lt/x-title & gt；& lt！--父JS-->；//获取参数goto e . detail(e){ const id = e . detail console . log(&；#39;从子组件&收到的id；#39;，id) }

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

& lt！--子JS-->；child method(){ console . log(& amp；#39;子组件的方法。#39;)}，父组件先给子组件一个id。

& lt！--parent wxml -->；& ltx-title id = & quot；titleCom & quot& gt& lt/x-title & gt；& ltvan-按钮类型= & quot主要& quotbindtap = & quottriggerChildMethod & quot& gt调用子组件方法

& lt！--父JS-->；on ready(){ this . title com = this . select component(& quot；# titleCom & quot);}，trigger child method(){ this . title com . child method()；}

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

单槽

将插槽添加到子部件

& lt！--子wxml -->；& ltslot & gt& lt/slot & gt；父级可以随意填充组件，比如插入图标(如果子级不添加slot，及时填充html就不会渲染)。

& lt！--parent wxml -->；& ltx-title & gt；& ltview class = & quot操作-换行& quot& gt& ltvan-icon name = & quot；箭头& quot/& gt；& lt/view & gt；& lt/x-title & gt；

多插槽

首先，在子部件的js中打开多插槽支持。

& lt！--子JS-->；选项:{multipleSlots: true //定义组件时在选项中启用多插槽支持}，向子组件添加插槽需要向插槽添加名称。

& lt！--子wxml -->；& lt插槽名称= & quot图标& quot& gt& lt/slot & gt；& lt插槽名称= & quotoper & quot& gt& lt/slot & gt；在父级使用

& lt！--parent wxml -->；& ltview class = & quoticon-wrap&quotslot = & quot图标& quot& gt& ltvan-icon name = & quot；订单-o & quot；size = & quot24 & quot/& gt；& lt/view & gt；& ltview class = & quot操作-换行& quotslot = & quotoper & quot& gt& ltvan-按钮类型= & quot主要& quotcustom -style = & quot；{ { customStyle } } & quot& gt更大的

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

虽然我只在[子组件]里加了一个槽，但是因为加了名字，我还需要在[子组件]的js里开多个槽。

选项:{multipleSlots: true //定义组件时在选项中启用多槽支持}、组件的生命周期组件({ lifetimes:{ attached:function(){//组件实例进入页面节点树时执行}、Detached: function() {//组件实例从页面节点树中移除时执行}、}、//组件所在页面的生命周期页面生命周期:{ show:function(){//页面显示}、Hide: function() {//页面隐藏}， resize: function(size) {//页面大小变化} }/以下为老式定义，可保留<兼容2.2.3版本基础库附:function() {//组件实例进入页面节点树时执行}、detached: function() {//组件实例从页面节点树中移除时执行}、// ...})更多编程相关知识请访问:编程视频！！

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

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

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