【JS】微信小程序基础开发(六)----自定义组件

Z时代
2024-01-10
分类：技术分享

(一)简单使用组件的三个步骤

1.创建自定义组件

2.声明自定义的组件

{
"usingComponents": {
"Tabs":"../../components/Tabs/Tabs"
}}

3.使用组件

【JS】微信小程序基础开发(六)----自定义组件

(二)组件的样式优化与标题激活选中

//tabs.wxml
<view class="tabs">
<view class="tabs_tittle">
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}"
>
{{item.name}}
</view>
</view>
<view class="tabs_content">内容</view></view>

Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
tabs:[
{
id:0,
name:"首页",
isActive:true
},
{
id:1,
name:"原创",
isActive:false
},
{
id:2,
name:"分类",
isActive:false
},
{
id:3,
name:"关于",
isActive:false
},
]
},
/**
* 组件的方法列表
*/
methods: {
}
})

标题激活选中

<view class="tabs">
<view class="tabs_tittle">
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}"
bindtap="handleItemTap"
data-index="{{index}}"
>
{{item.name}}
</view>
</view>
<view class="tabs_content">内容</view></view>

 //tabs.js
methods: {
handleItemTap(e) {
/*
1、绑定点击事件   在methods中绑定
2、获取被点击的索引
3、获取原数组
4、对数组循环
*/
//获取索引
const { index } = e.currentTarget.dataset;
//获取data中的数组
//等价于let tabs=this.data.tabs;
let { tabs } = this.data;
//循环数组
tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
this.setData({
tabs
})
}}

(三)父向子传递数据

父组件的wxml

<!--
demo.wxml
父组件页面向子组件传递数据是通过标签属性的方式
1、在子组件进行接收
2、把这个数据当成data中的数据直接使用
--><Tabs aaa="123"></Tabs>

子组件的js

//Tabs.js // 里面存放的是要从父组件接收的数据 properties: { // 要接收的数据的名称 aaa:{ // type 要接收的数据的类型 type:String, // value 默认值 value:"" }

},

子组件的wxml

<view>
{{aaa}}</view>

(四)子向父传递数据

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

`this.triggerEvent{"父组件自定义事件的名称",要传递的参数}`

(五)slot

slot标签其实就是一个占位符，插槽，当父组件调用子组件的时候，再传递标签过来，最终这些被传递的标签会替代slot插槽的位置

<Tabs>
<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:elif="{{tabs[3].isActive}}">3</block>
</Tabs>