小程序.5—自定义组件

本文主要是介绍小程序.5—自定义组件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

自定义组件

自定义组件的创建，以及引用

1.在主目录下创建一个文件夹components用于存放各个自定义的组件，这里先定义一个Tabs组件（注意我们定义的是组件，就像view，text一样，想要页面显示相关内容也要在页面的wxml里面引用）

所以再companies文件夹里在定义一个Tabs文件夹然后右键文件夹，选择新建companies就会自动生成四个必要文件，如图：

随后我们在要引用该组件的页面文件.json文件中引用该组件

然后在页面文件.wxml中使用组件

样式优化

这里我们试着做一下这样一个标题栏

当然这里做完还只是一个样式组件，还不能做到点击页面的跳转，后面才会学习页面的父向子传递。

如果我们要让每个页面有这种相同的（内容都相同）的标题栏，我们可以在自定义组件的wxml中直接写view标签，然后再通过wxss进行优化

这里我后来修改了改成了注释

这里写完wxss优化后发现从原来的一竖行变成了这样的一个标题栏样式，但是不可能每个需要标题栏的页面，标题类容都是一样的，所以我们改一种写法让后期改动更加方便，所以我才会把上面的wxml注释掉

在Tabs.js中用数组写下

注意这里的属性赋值用：，不是java惯性思维用=

要显示出来还是要在wxml中循环显示出数组中元素的信息，在小程序开发中特有的循环是wx：for{{数组名}}

这里还有一个关键帧key即根据id来显示这样可以确定我们显示的顺序

标题激活选中

通过写回调函数，使得选中时有一定的表达

（ 1.页面.js文件中 存放事件回调函数的时候 存放在data同层级下！！！

2 组件.js文件中 存放事件回调函数的时候必须存放在methods中！！！）

绑定事件分为如下几步

/* 1.绑定点击事件，需要在methods中绑定

​ 2.获取被点击的索引

做一个事件传参的方式来获取

​

随后我们在页面点击标题会显示打印，我们点开打印可以看到

3.获取原数组（获取data中的数组）

创建了一个数组tabs用于存放data中的数组

​ 4.对数组循环

​ 1给每一个循环项 选中属性 改为false

​ 2给当前索引的项 添加激活选中效果*/

[].forEach方法是在js中用来遍历数组的方法 修改了 v，也会导致原数组被修改

这里先调用我们创建的tabs数组的forEch方法来判断我们点击的是哪个，改变对应的isActive的值，再将改动后的tabs传给data中的原数组

父向子传递数据

上面我们在自定义组件中写了标题，且完成了可以选中发生改变，但是这样页面在使用这个组件时，内容都是一摸一样的，要完成标题项的动态化，我们可以使用父向子传递的方法来实现，也就是在页面中写好在传递到我们的自定义组件中。

这里我们是以页面wxml为父组件向自定义组件传递其属性值

这里只是用aaa来演示，后面我们改一下传入数组

然后我们在子组件这里是自定义组件Tabs的js文件里添加我们的properties用于接收

这里也是用的字符串方便演示，更改后

随后我们在子组件的wxml页面打印

子向父传递数据

意思就是要使我们点击事件发生的时候改变我们父组件中data的值，上面我们写的父向子传递的方式像是复制，点击事件发生后并不能改变父组件中的data相当于我们子组件将父组件data复制了份改变的是复制的值，这里我们先在子组件中调用triggerEvent方法

然后我们更改父组件的wxml里的事件

当我们点击事件发生时相当于触发了这的binditemChange事件，以及后面的handleItemChange回调函数

然后在父组件js中写一个自定义事件，用来接收子组件接收的数据 就是完善父组件wxml中定义的回调函数体

这里我们因为不知道传参的位置所以先这样写，然后我们点击观察打印，确定传参的位置再改写代码

这里我们点击后发现90行有个打印，展开看

发现是detail，所以我们更改代码

这里我们有了索引，然后拿到原数组，根据点击遍历原数组，改变原数组

这样我们点击过后原数据就发生了改变

slot（实现点击不同的标题显示不同的内容）

在页面中完善要传递的内容就行了，激活时会自动替换slot

更多的自定义组件内容学习，自看官方的文档

[自定义组件](自定义组件 | 微信开放文档 (qq.com))

这篇关于小程序.5—自定义组件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！