小程序自定义组件

步骤：

创建

声明（那个页面要使用自定义组件，就在那个页面的json文件中声明）

{
    "usingComponents": {
        "Tabs": "../../components/Tabs/Tabs"
    }
}
复制代码

使用
```
<Tabs></Tabs>
复制代码
```

注意：

页面的.js文件中，存放事件回调函数的时候，存放在data同层级下
组件的.js文件中，存放时间的回调函数的时候，存放在methods中
在小程序中不要直接通过this.data.x.来修改数组的值（建议先拷贝一份数组，然后再对拷贝的数组进行修改）
```
let tabs = JSON.parse(JSON.stringify(this.data.tabs));

let tabs = this.data;
复制代码
```

组件之间的传值

父组件向子组件传值

通过 标签的属性来传递的：

父组件传递
```
<Tabs aaa="123"></Tabs>
复制代码
```

子组件接收

Component({
    // 里面存放的是要从父组件中接收的数据
    properties: {
        // 要接受的数据的名称
        aaa:{
            //type 接收数据的类型
            type: String,
            //value 默认值
            value: ""
        }
    }
});
复制代码

子组件使用父组件中传递过来的数据

将接收过来的数据当作本身data中的数据来使用
```
<view>{{ aaa }}</view>
复制代码
```

子组件向父组件传值

通过事件来传递的。

tab切换栏，点击切换。

绑定点击事件需要在methods中绑定
获取被点击的索引
获取原数组
对数组循环
1. 给每一个循环项选中属性改为 false
2. 给当前的索引的项添加激活选中效果
点击事件触发的时候，触发父组件中的自定义事件同时传递给父组件
1. this.triggerEvent("父组件自定义事件的名称"，要传递的参数)

Tabs页面中：

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

<view class="tabs_content">
    // 占位符  传递的参数会替换掉 
	<slot></slot>
</view>
复制代码

子组件的js文件中：(这样写不能改变组件内部的数据，只是基于样式的改变，不是基于功能)

methods: {
    hanldeItemTap(e) {
        // 获取索引
        const {index} = e.currentTarget.dataset;
        // let {tabs} = this.data;
        // tabs.forEach((v,i) => i===index?v.isActive=true:v.isActive=false);
        // 修改data中的数据
        // this.setData({
        //    tabs
        // })
        
        // 触发父组件中的自定义事件同时传递给父组件
        this.triggerEvent("itemChange", {
            index
        })
    }
}
复制代码

在父组件中的自定义组件中添加自定义事件：

<Tabs binditemChange="handleItemChange">
	<block wx:if="{{tabs[0].isActive}}">1</block>
    <block wx:if="{{tabs[1].isActive}}">2</block>
    <block wx:else>3</block>
</Tabs>
复制代码

父组件的js中：

data: {
    tabs: [
        {
            id: 1,
            name: "首页",
            isActive: true
        },
        {
            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);
    // 修改data中的数据
    this.setData({
        tabs
    })
}