微信小程序自定义组件的实现方法及自定义组件与页面之间的数据传递

首先，我们在pages文件夹下创建组件目录来存储自定义组件。如图所示，以我创建的对话框组件为例，自定义组件的格式与页面的格式相同，分为四个文件。

图1

图2

如上图2所示，假设索引页面上有一个按钮触发click事件，然后弹出对话框。单击部门时，对话框关闭，部门名称与红色标题同步。

1.首先，编写对话框组件的样式，并在索引页的相应位置引用它。下面是代码(分别是：wxml、wxss、js、json)

view class=' wx _ dialog _ container ' hidden=' { {！isShow } } ' view class=' wx-mask ' bind tap=' close '/view view view class=' wx-dialog ' text class=' Li ' bind tap=' group click ' wx : for=' { { items } } ' data-index=' { { index } } ' wx : for-item=' item ' { item . department } }/text/view/view . wx _ dialog _ container { width : 100%；高度： 100%；z-index : 999；}.wx-mask{位置：固定；z-index : 1000；top : 0；right : 0；左侧：35%；bottom : 0；background: rgba(0，0，0，0.3)；}.wx-dialog{ position:固定；最小宽度： 528 rpx；高度： 100%；left : 0；top:314px-web kit-transform : translate(-50%，-50%)；transform: translate(-50%，-50%)；背景-color : # FFFFFF；text-align : left；}.wx-对话框。li{ display:块；font-size : 18px；margin-top :28 px；左边距left:154px}组件({properties: {}，data: {isshow: false，animation data3360 {}，color:' # 000 '，items: [{department3360 '研发部' }，{department: '设计部' }，{department: '人事部' }，{department: '销售部' }，{ department 3: '营销运营部' })setdata ({is show) }，close : function(){ this . setdata({ isshow : false })}，//自定义组件和页面之间的数据通信group click : function(e){ var group=this . data . items[e . target . dataset . index]console . log(group)//使用triggerEvent方法触发自定义组件事件，指定事件名称、详细对象和事件选项this。triggerevent ('ok事件'，{group}，{})这。setdata ({isshow: false})}，}，}){ 'component': true}最后一步，别忘了在对应的页面引用。注意：自定义组件的名称应该与组件目录中的名称一致。如下所示，我在index.wxml中使用了它

第二，组件如何与页面通信？

首先，我们需要知道你点击的是列表中的哪个部门，所以我们需要在list元素中添加一个groupClick事件，并打印出事件对象e，我们发现我们想要的数据已经在e.target.dataset.index中获得了数据对象，下一步就是想办法把它传递到index页面来更新数据。如果您想在当前页面的组件中获得某种状态，您需要使用this.triggerEvent('，{}，{})。第一个参数是自定义事件名称，因此您需要将自定义事件绑定到组件。第二个对象是您想要传递的数据，第三个对象通常是不必要的(参见代码中标记的黄色部分)。最后，在页面的index.js中定义这个事件来接收对话框的数据并打印出来(下面的代码)

//接受triggerEvent方法触发的用户自定义组件事件，更新同步数据okevent 3360 function(e){ console . log(e)this . setdata({ group name : e . detail . group . department })}，第三，最后一点小知识

如果要在index.js逻辑中引用dialog.js中的方法中定义的方法，需要在index.js中添加以下代码。

onReady:函数(){ this . dialog=this . selectcomponent(' # dialog ')；}，例如，我在组件的方法中定义了show和close方法。要在索引页面中触发某个时间来显示对话框，只需将其写入index.js

摘要

以上是边肖介绍的微信小程序自定义组件的实现方法，以及自定义组件与页面之间的数据传递。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！