文章目录
前言
一、自定义组件
1.小程序中的组件
2.组件的定义
1.1 声明组件
1.2 使用组件
1.3 效果
前言
组件（Component）是对数据和方法的简单封装。组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。使用组件可以实现拖放式编程、快速的属性处理以及真正的面向对象的设计。
一、自定义组件
1.小程序中的组件
在微信小程序开发过程中，对于一些可能在多个页面都使用的页面模块，可以把它封装成一个组件，以提高开发效率。虽然说我们可以引入整个组件库比如 weui、vant 等，但有时候考虑微信小程序的包体积限制问题，通常封装为自定义的组件更为可控。
⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。一个自定义组件由 json wxml wxss js 4个文件组成。
2.组件的定义
1.1 声明组件
⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明
代码语言：javascript复制{
"component": true,
"usingComponents": {}
}// components/Tabs.js
Component({
/**
* 里面存放的是 要从父组件中接收的数据
*/
properties: {
// 要接收的数据的名称
// aaa:{
// // type 要接收的数据的类型
// type:String,
// // value 默认值
// value:""
// }
tabs:{
type:Array,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
// tabs
},
/*
1 页面.js 文件中 存放事件回调函数的时候 存放在data同层级下！！！
2 组件.js 文件中 存放事件回调函数的时候 必须要存在在 methods中！！！
*/
methods: {
hanldeItemTap(e){
/*
1 绑定点击事件 需要在methods中绑定
2 获取被点击的索引
3 获取原数组
4 对数组循环
1 给每一个循环性 选中属性 改为 false
2 给 当前的索引的 项 添加激活选中效果就可以了！！！
5 点击事件触发的时候
触发父组件中的自定义事件 同时传递数据给 父组件
this.triggerEvent("父组件自定义事件的名称",要传递的参数)
*/
// 2 获取索引
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;
// 4 循环数组
// [].forEach 遍历数组 遍历数组的时候 修改了 v ，也会导致源数组被修改
// tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
// this.setData({
// tabs
// })
}
}
})<view class="tabs">
<view class="tabs_title">
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}"
bindtap="hanldeItemTap"
data-index="{{index}}"
>
{{item.name}}
</view>
</view>
<view class="tabs_content">
<slot></slot>
</view>
</view>.tabs{}
.tabs_title{
display: flex;
padding: 10rpx 0;
}
.title_item{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.active{
color:red;
border-bottom: 5rpx solid currentColor;
}
.tabs_content{}1.2 使用组件
代码语言：javascript复制<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >
<block wx:if="{{tabs[0].isActive}}">0 </block>
<block wx:elif="{{tabs[1].isActive}}">1 </block>
<block wx:elif="{{tabs[2].isActive}}">2 </block>
<block wx:else>3</block>
</Tabs>{
"usingComponents": {
"Tabs":"../../components/Tabs/Tabs"
}
}// pages/demo17/demo18.js
Page({
/**
* 页面的初始数据
*/
data: {
tabs: [
{
id: 0,
name: "首页",
isActive: true
},
{
id: 1,
name: "原创",
isActive: false
}
,
{
id: 2,
name: "分类",
isActive: false
}
,
{
id: 3,
name: "关于",
isActive: false
}
]
},
// 自定义事件 用来接收子组件传递的数据的
handleItemChange(e) {
// 接收传递过来的参数
const { index } = e.detail;
let { tabs } = this.data;
tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
this.setData({
tabs
})
}
})
1.3 效果
