In the page.js file, the event callback function is placed at the same level as data, while in the component.js file, the event callback function must be stored in methods

Component creation:

Component references:

{
  "usingComponents": {
    "Tabs":".. /.. /components/Tabs/Tabs"}}Copy the code

Component use

Get the index of the current clicked event:

<view class="title_item {{item.isActivity? 'active':''}}" wx:for="{{tabs}}" wx:key="id" data-index="{{index}}" bindtap="handleItemTap"> {{item.name}} </view>Copy the code
const {index} = e.currentTarget.dataset;
Copy the code

TAB toggles an array defined in tabs: data

let {tabs} = this.data;
tabs.forEach((v,i) = >i===index? v.isActivity=true:v.isActivity=false);
this.setData({
  tabs
})
Copy the code

Parent -> Child component

The way a parent component passes data to a child component is through tag propertiesCopy the code
<Tabs aaa='123'></Tabs>
Copy the code

The child component receives data passed by the parent component

properties: {
        aaa: {//type Indicates the type of data to receive
            type:"string"./ / the value the default values
            value:""}},Copy the code

Subcomponents use:

<view>{{aaa}}</view>
Copy the code

Child component -> Parent component passes information

Click event trigger: trigger custom events in the parent component and pass them to the parent component

This.triggerevent (' Parent component custom event name ', parameters to be passed)

this.triggerEvent('itemChange',{index})
Copy the code

Parent component custom events:

<Tabs aaa='123' binditemChange="handleItemChange"></Tabs>
Copy the code

Get the passed value:

 const {index} = e.detail;
Copy the code

User-defined component-slot

<view> <! The slot tag is a placeholder. The slot is known only when the parent component calls the child component --><slot></slot>
 </view>
Copy the code
<! --pages/demo1/demo1.wxml--><Tabs aaa='123' binditemChange="handleItemChange">
 <block wx:if="{{tabs[0].isActive}}">0</block>
 <block wx:elif="{{tabs[1].isActive}}">2</block>
 <block wx:elif="{{tabs[2].isActive}}">2</block>
 <block wx:else>3</block>
</Tabs>

Copy the code