微信小程序组件

Component({

  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },
  
  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    created() {
    	// 在组件实例刚刚被创建时执行
    },
    attached() {
    	// 在组件实例进入页面节点树时执行
    },
    ready() {
    	// 在组件在视图层布局完成后执行
    },
    moved() {
    	// 在组件实例被移动到节点树另一个位置时执行
    },
    detached() {
    	// 在组件实例被从页面节点树移除时执行
    },
  },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show() { },
    hide() { },
    resize() { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod: function(){
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }
})

微信小程序组件通信

index.json

{
  "usingComponents": {
    "van-icon": "@vant/weapp/icon/index",
    "position": "../../components/position/position",
    "van-action-sheet": "@vant/weapp/action-sheet/index"
  },
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark",
  "onReachBottomDistance": 100
}

index.wxml

<position wx:for="{{list}}" wx:key="id" item="{{item}}" bind:clickMore="onMore"></position>
<van-action-sheet
  show="{{ showMore }}"
  actions="{{ moreActions }}"
  bind:close="onClose"
  bind:select="onSelect"
  cancel-text="取消"
  bind:cancel="onClose"
/>

index.js

onMore(data) {
    const moreActions = [
      {
        name: data.detail.position,
        color: '#999'
      },
      {
        name: "导航"
      },
      {
        name: data.detail.address
      }
    ];
    this.setData({
      showMore: true,
      moreActions: moreActions
    })
  },
  onClose() {
    this.setData({ showMore: false });
  },
  onSelect(e) {
    console.log(e)
  }

 position.js

onMore() {
      this.triggerEvent("clickMore", this.data.item)
}

-----------------基础版-------------------------------

 https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html 

父组件

<navBar 
list="{{checkList}}" ---------------------------------------------------------------->父传子
current="{{current}}" 
bindparentEvent="handleparentEvent"//------------------------------------------------>子传父
></navBar>
<swiper bindchange="handleChange" current="{{current}}">
  <swiper-item wx:for="{{checkList}}" wx:key="index">
    {{item.name}}
  </swiper-item>
</swiper>
Page({
  data: {
    current:0,
    checkList:[
      {
        id:1,
        name:'小神龙',
        price:20,
        checked:false
      },
      {
        id:2,
        name:'动力',
        price:10,
        checked:false
      },
      {
        id:3,
        name:'心累累',
        price:90,
        checked:false
      }
    ]
  },
  onLoad() {
  },
  handleCheck(evt){

    this.data.checkList[evt.target.dataset.index].checked=!this.data.checkList[evt.target.dataset.index].checked
    this.setData({
      checkList:[...this.data.checkList]
    })

  },
  handleChange(evt){
    this.setData({
      current:evt.detail.current
    })
  },
  handleparentEvent(evt){//--------------------------------------------------------------------------->子传父
    this.setData({
      current:evt.detail
    })
  }
})

子组件

<text wx:for="{{list}}" wx:key="index" class="{{current==index?'active':''}}" data-index="{{index}}" bindtap="handleClick">
{{item.name}}
</text>
Component({

  properties: {
    list:Array,
    current:Number
  },


  methods: {
    handleClick(evt){
      this.triggerEvent('parentEvent',evt.currentTarget.dataset.index)------------------------>子传父
    }
  }
})

*插槽*

子组件

<view>
<slot name='left'></slot>
components/slot/slot.wxml
<slot name='right'></slot>
</view>
<--js文件中-->
options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
},

父

<slotL>
<button slot='left'>left</button>
<view slot='right'>right</view>
</slotL>