5.关于小程序组件方面

小程序组件和VUE组件类似，闲来得空还是总结一下

1.创建组件及引入
（1）.先建一个comcoponents文件夹
（2）.comcoponents文件夹下创建一个组件（如下图）

（3）.在页面的.json文件下引入

{
  "usingComponents": {
    "showmodel-wx":"/components/showmodel-wx/index"
  }
}
//wxml文件内使用
<showmodel-wx> </showmodel-wx>

1.组件传值
（1）.主页面传值给组件 子组件接收值

//父页面引入的组件
<showmodel-wx visible="{{popupVisible}}" ></showmodel-wx>
//组件里面接收
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //visible 传值的名称
    visible: {
    //type传递值的类型
      type: Boolean,
  //value 传递值的默认值
      value: true
    },
  },
})

（2）.子组件传值给父页面
微信文档地址

//子组件，通过事件触发传值，如下
this.triggerEvent('close',
//传递给页面的值
 {
  'math': this.data.math,
  },
  事件是否冒泡
  {
  bubbles:true
  }
)
//wxml文件内使用
<showmodel-wx bind:close='closePop'> </showmodel-wx>
//页面接收
closePop(e){
//拿到组件传过来的值
console.log(e.detail.math)
}

3.小程序组件插槽

//插槽方面
 options: {
    multipleSlots: true 
// 在组件定义时的选项中启用多slot支持,多个插槽需要在组件设置multipleSlots为true，默认为单插槽
  },
//组件页面
<view>
<!-- 默认插槽 -->
<slot></slot>
<!-- 具名插槽 -->
<slot name="abc"></slot>
</view>
//主页面
<showmodel-wx>
<view>默认的插槽</view>
<view slot="abc">具名插槽</view>
</showmodel-wx>

4.小程序组件生命周期函数
微信官方文档
希望能帮到大家，也便于自己记录（如果有帮助到大家可以点下赞哦~）！！！
如有疑问或者不对的地方可以下方评论留言讨论哦~会积极回复大家的！！！