1、⾃定义组件
类似vue或者react中的自定义组件
⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。
1.1.创建⾃定义组件
类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成
可以在微信开发者⼯具中快速创建组件的⽂件结构
在⽂件夹内 components/myHeader ,创建组件名为myHeader
1.2.声明组件
⾸先需要在组件的 json⽂件中进⾏⾃定义组件声明
myHeader.json
{
"component": true
}
1.3.编辑组件
同时,还要在组件的wxml⽂件中编写组件模板,在wxss⽂件中加⼊组件样式
slot 表⽰插槽,类似vue中的slot
myHeader.wxml
<!-- 这是自定义组件的内部WXML结构 --> <view class="tabs"> <view class="tabs_title"> <!-- <view class="title_item active">首页</view> <view class="title_item">原创</view> <view class="title_item">分类</view> <view class="title_item">关于</view> --> <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 插槽的位置 --> <slot></slot> </view> </view>
在组件的wxss⽂件中编写样式
注意:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
myHeader.wxss
/*这是自定义组件的内部wxss样式*/ .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.3.注册组件
在组件的 js ⽂件中,需要使⽤Component() 来注册组件,并提供组件的属性定义、内部数据和 ⾃定义⽅法
myHeader.js
// 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 // }) } } })
1.4. 声明引定义组件
先要在的 json 件中进引声明。还要提供对应的组件名和组件路径
index.json
{ // 引用声明 "usingComponents": { // 要使用的组件的名称 // 组件的路径 "Tabs":"../../components/Tabs/Tabs" } }
1.5. 页面文件中使用自定义组件
<!-- 1 父组件(页面) 向子组件 传递数据 通过 标签属性的方式来传递 1 在子组件上进行接收 2 把这个数据当成是data中的数据直接用即可 2 子向父传递数据 通过事件的方式传递 1 在子组件的标签上加入一个 自定义事件 --> <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>