【微信小程序开发（13）---自定义组件component】

{

id:2,

name:“分类”,

isActive:false

},

{

id:3,

name:“关于”,

isActive:false

}

]

},

//自定义事件 用来接收子组件传递的数据的

handleItemChange(e){

//console.log(e);

//接收传递过来的参数

const {index}=e.detail;

// console.log(index);

let {tabs}=this.data; // 与 let tabs = this.data.tabs; 意思相同

// 循环数组

// [].forEach 遍历数组 遍历数组的时候 修改了 v ，也会导致原数组被修改。

tabs.forEach((v , i) => i === index ? v.isActive = true : v.isActive = false);

//上一行的 tabs 也可以写成 this.data.tabs

this.setData({

tabs

})

}

})

注意：demo17.json不同于以往例子，这里需要作出改变:

demo17.json

{

“usingComponents”: {

“Tabs”:“…/…/components/Tabs/Tabs”

}

}

demo17.wxml

0

1

2

3

components是子组件：

Tabs.js

// components/Tabs/Tabs.js

Component({

/**

*里边存放的是要从父组件中 接收的 数据

*/

properties: {

//要接收的数据的名称

// aaa:{

// type 要接收的数据的类型

// type:String,

// value 默认值

// value:“a123a”

tabs:{

type:Array,

value:[]

}

},

/**

• 组件的初始数据

*/

data: {

},

/*

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

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

*/

methods: {

handleItemTap(e){

//console.log(“点击我试试”);

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

2 获取被点击的索引

3 获取原数组

4 对数组循环

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

2 给 当前的 索引的项 添加 激活选中效果就可以了！！

5 点击事件触发的时候

触发父组件中的 自定义事件，同时传递数据给 父组件

this.triggerEvent(“父组件中自定义事件的名称”,要传递的参数)

*/

// 2 获取索引

//console.log(e);

const {index} = e.currentTarget.dataset;

// 5 触发父组件中的 自定义事件，同时传递数据给 父组件

this.triggerEvent(“itemChange”,{index});

// 3 获取data中的数组

// 解构 对复杂类型进行 结构 的时候， 复制了一份变量的引用而已

// 最严谨的做法是 重新拷贝 一份数组 ，再对数组的备份进行处理，

// let tabs = JSON.parse(JSON.stringify(this.data.tabs)); (深拷贝)

// 不要直接修改 this.data.数据

// let {tabs}=this.data; // 与 let tabs = this.data.tabs; 意思相同

// 4 循环数组

// [].forEach 遍历数组 遍历数组的时候 修改了 v ，也会导致原数组被修改。

// tabs.forEach(( v , i) => i=== index ? v.isActive = true : v.isActive = false);

//上一行的 tabs 也可以写成 this.data.tabs

// this.setData({

// tabs

// })

}

}

})

Tabs.json

{

“component”: true,

“usingComponents”: {}

}

Tabs.wxml

# 最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
)]

[外链图片转存中…(img-UjVKp0Ba-1715055505312)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！