要点总结

  1. properties接收父级数据

  2. this.triggerEvent('xx',yy);触发父级方法

    组件配置&定义

    路径如下, 可以通过app.json配置 "componenets/comp1/comp1"
    image.png

  3. comp1.json 配置 {"component": true }

  4. comp1.wxml

    1. <view class="tabs">
    2.  <view class="tabs_title">
    3.    <!--  tabs 接收的数据 -->
    4.    <!--  hanldeItemTap 接收的方法 -->
    5.      <view
    6.          wx:for="{{tabs}}" 
    7.          wx:key="id"
    8.          bindtap="hanldeItemTap" /* 函数 */
    9.          data-index="{{index}}" /* 数据 */
    10.          >
    11.          {{item.name}}
    12.      </view>
    13.  </view>
    14.  <slot></slot>
    15. </view>

  5. comp1.js

    Component({
properties: {
 //接受数据tabs
 tabs:{
   type:Array,
   value:[]
 }
},
data: {
 // 这里是一些组件内部数据
 someData: {}
},
methods: {
 hanldeItemTap(e){
   //获取数据
   const {index} = e.currentTarget.dataset;
   //触发
   this.triggerEvent('itemChange',index);
 }
 }
})

    page引用

  6. test.json 注册my-comp组件

    {
"usingComponents": {
 "my-comp":"/componenets/comp1/comp1"
}
}

  7. test.wxml 使用组件

    //传递数据tabls 函数itemchange
<Tabs tabs="{{tabs}}" binditemChange="itemChange">
 //填补插槽
 <block>123</block>
</Tabs>

  8. test.js 触发事件

    //定义事件 用于传递给组件触发 
itemChange(e){
     const index = e.detail; //接收数据
}