微信小程序-自定义组件

页面.js文件中，存放事件回调函数放置在data同层级下,组件.js文件存放事件回调函数时，必须存放在methods中

组件的创建：

组件的引用：

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

组件的使用<Tabs></Tabs>

获取当前点击事件的索引：

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

const {index} = e.currentTarget.dataset;

tab切换 tabs: data中定义的一个数组

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

父->子组件

  父组件向子组件传递数据的方式是通过标签属性的方式来传递的

<Tabs aaa='123'></Tabs>

子组件接收父组件传递的数据

properties: {
        aaa:{
            //type 要接收的数据类型
            type:"string",
            //value 默认值
            value:""
        }
    },

子组件使用：

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

子组件->父组件传递信息

点击事件触发的时候： 触发父组件中自定义事件，同时传递给父组件

this.triggerEvent('父组件自定义事件名称'，需要传递的参数)

this.triggerEvent('itemChange',{index})

父组件自定义事件：

<Tabs aaa='123' binditemChange="handleItemChange"></Tabs>

拿到传递的值：

 const {index} = e.detail;

自定义组件-slot

   <view>
     <!-- slot标签就是一个占位符，插槽 
     只有父组件调用子组件时候才知道-->
     <slot></slot>
 </view>

<!--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>