自定义组件总结（14）

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

1. 先刷新，再在根目录新建一个文件夹（如果不是在根目录新建，直接右键文件夹——新建目录即可）
   

2. 右键这个新的目录，新建一个Component，Component名字就是新的组件标签名
   

3. 声明组件：在json文件中会有"component": true,

4. 使用自定义组件，在父page的json中使用组件，在usingComponents中声明组件路径
   

5. 然后编辑子组件，在WXSS中编辑这个子组件的样式，WXML中编辑这个子组件的模板，同时加入slot插槽，用于替换父page使用这个组件时其中的内容

6. 事件的绑定
   页面js文件中，存放事件的回调函数，存放在data同级下
   页面js文件中，存放组件的回调函数，存放在methods下
   wxml中：bindtap="handle_item_click" data-index="{{index}}//分别是绑定的事件名和传递的事件参数
   js的method中handle_item_click（e）{...}

7. 注册组件属性（父向子传数据）：在组件的 js ⽂件中，需要使⽤ properties 来注册组件的属性列表，并提供组件的属性定义、内部数据和⾃定义⽅法
   此时，父组件传递的参数就能被子组件识别并根据properties的模板拷贝一个数据备份到data中

Component({
  properties: {
    // 这里定义了子组件的和父页面通信时的数据类型和数据值，属性值可以在组件使用时指定
    innerText: {//innerText是父page在使用这个子组件时使用的一个参数作用的属性
      // 内容是期望要的数据类型和默认值
      type: String,
      value: 'default value',
   }
 },

7. 子向父传数据

• 在子组件想要传递数据给父页面的地方使用this.triggerEvent(“父组件自定义事件名”,要传的数据)向父page传递数据，如：this.triggerEvent("item_change",{index});//事件名：item_change
• 在父页面wxml标签中绑定事件<Tabs tabs="{{tabs}}" binditem_change="handle_item_change">//关键字：bind+事件名
  //绑定事件的方法名：handle_item_change
• 父page的js写绑定事件函数

8. 然后即可在父page中自由使用这个Tabs标签