类似vue或者react中的自定义组件

1. ⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。

1. 创建⾃定义组件

类似于页面，一个自定义组件由 wxss json wxml js 4个文件组成

1. 可以在微信开发者⼯具中快速创建组件的⽂件结构,首先创建一个 component 文件夹用于存放自定义组件。

使用微信开发者工具快速创建组件目录结构

创建完成之后的文件结构

2. 声明组件

1. ⾸先需要在组件的json⽂件中进⾏⾃定义组件声明；

{
  "component": true,
  "usingComponents": { // 可以使用其他组件}
}

2. 新建一个页面使用自定义组件 ;

   
   
   自定义新的页面

3. 在新建的页面的 json 中使用自定义组件 :

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

4. 在wxml文件中使用引入的自定义组件:

<Tabs>
</Tabs>

3. 自定义组件-Tabs样式优化

1. wxml代码:

<!-- 
    1. 自定义组件 - 优化组件样式
 -->

 <view class="tabs">
    <view class="title">
       <view wx:for="{{tabs}}" wx:key="{{item.id}}"  class="title-item {{item.isActive ? 'active':''}}">
        {{item.name}}
       </view>      
    </view>
    <view class="content">内容</view>
</view>

2. 需要将tabs菜单的数据进行抽取到数组中进行遍历展示:

   // component/Tabs/Tabs.js
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: {

    }
})

3. 编写样式文件 :

.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 #f00;
}

4. 实现tabs激活选中

1. 需要为view绑定一个单击事件，并传递当前点击的item的索引 。

    <!-- 
    1. 自定义组件 - 优化组件样式
 -->

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

绑定一个点击事件，并传递当前点击的 item项的索引

2. 处理单击事件:

     /**
     * 组件的方法列表
     */
    methods: {
        handleItemTap(e) {
            // 进行解构赋值 下面这句相当于 this.index = e.currentTarget.dataset.index
            const { index } = e.currentTarget.dataset;
            // 解构是对复杂类型进行解构的时候复制一份变量引用而已
            // 最严谨的做法就是重新拷贝一份数组再对这个数组的备份进行处理
            // 不要直接this.data.属性
            let { tabs } = this.data;
            // 下面是最严谨的写法
            // let tabs = JSON.parse(JSON.stringify(this.data.tabs));
            tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
            this.setData({
                tabs
            })
        }
    }

需要在methods内完成方法的编写

3. 注意单击事件中的解构赋值:

          // 进行解构赋值 下面这句相当于 this.index = e.currentTarget.dataset.index
            const { index } = e.currentTarget.dataset;
            // 解构是对复杂类型进行解构的时候复制一份变量引用而已
            // 最严谨的做法就是重新拷贝一份数组再对这个数组的备份进行处理
            // 不要直接this.data.属性
            let { tabs } = this.data;
            // 下面是最严谨的写法
            // let tabs = JSON.parse(JSON.stringify(this.data.tabs));

5. 父组件向子组件传递数据

1. 在父组件引用子组件的page中的标签上传递一个数据: 里面的属性名称任意，符合命名规范

 <Tabs parent="父亲"></Tabs>

2. 在子组件的 properties 中接收父组件传递的值：

接收父组件传递的值

3. 此时便可以在子组件的标签中直接使用该属性。

4. 将上面的tabs数组通过父传子的方式，从父组件将数据传递到子组件:

在data域中定义一个tabs数组

父组件传递tabs数组

子组件接收父组件数据

5. 但是以上的写法是有问题的 : 因为子组件中修改了tabs的数据，但是父组件中的数据并未实现修改:

父组件中的tabs未实现修改

6. 实现父组件中数据的修改需要使用到子组件向父组件传递数据的方式。

6. 子组件向父组件传递数据

1. 在父组件中定义一个父组件的自定义事件 : bindItemChange

父组件自定义事件（我使用bindItemChange这种方式好像不被支持）

查阅官方文档之后采用 bind:自定义事件名称的方式可以

2. 子组件向父组件通过事件的方式传递数据 :

methods: {
        handleItemTap(e) {
            // 进行解构赋值 下面这句相当于 this.index = e.currentTarget.dataset.index
            const { index } = e.currentTarget.dataset;
            // 点击tabs触发事件的时候需要传递数据给父组件  this.triggerEvent("父组件自定义事件的名称",要传递的参数)
            // 子组件通过事件的方式向父组件传递数据 参数需要传递一个对象
            this.triggerEvent("itemChange", { index });
        }
    }

3. 父组件接收子组件通过事件传递的数据 :

 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 等价于 this.tabs = tabs
            tabs
        })
    }

7. slot 插槽（占位符）标签

1. 在自定义组件中使用 slot标签进行占位 :

在自定义组件中使用slot进行占位

2. 在父组件中定义需要显示的内容 :

根据isActive属性判断显示内容

8. 组件的其他属性