小程序自定义组件

自定义组件常用语法（Component）

lifetimes//生命周期
	attach //组件的挂载
data //数据
methods  //方法
properties //属性（只读）
externalClasses //外部类
options //选项
    multipleSlots:true //多个插槽
    stylelsolation:"isolated" //组件的样式格式

组件的使用

1.定义组件（js，wxml，json，wxss）

2.页面的xxjson

  usingComponent注册

 "usingComponents": {
 "cell":/components/cell/cell",
 "item:"/components/item/item"
 }

2.使用组件

    <cell></cll>
    <item></tem>

定义组件(item)

props

    title 标题
    icon 图标
    tip 提示
    url 跳转链接
    open-type 打开方式

slot

    right
    left 插槽

event

    click事件

外部类

    itemClass整体
    titleClass标题

自定义组件生命周期

lifetimes // 组件的生命周期

    created //创建
        此时还不能调用setData

    attached //挂载
    detached // 卸载

pageLifetimes    //页面的生命周期
    show显示
    hide后台运行
    resize尺寸变化

写自定义导航栏

wx.getMenuButtonBoundingClientRect() //胶囊的边界

wx.getSystemInfoSync();//系统信息(状态栏的高度)

配置自定义状态栏

自定义组件使用

组件的样式

样式隔离

options:{
 	styleIsolation:"isolated"
},//样式隔离: apply-shared 父影响子，shared父子相互影响， isolated相互隔离

外部类

externalClasses:["cell-class"],

<view class="cell cell-class">我是cell组件</view>
//页面中
<cell cell-class="mycell"></cell>
<cell></cell>

//样式
.mycell{
  line-height: 120rpx !important;
  color:#F70;
}

组件的插槽

默认插槽
   父组件
    	<cell><text>插槽内容</text></cell>
    子组件
         <view><slot> </slot> </view>
命名多插槽
     父组件
		<cell>
		    <text slot="pre"> 🚒</text>
		    <text slot="next">🥗</text>
		</cell>
     子组件
		options:{ multipleSlots:true}
		<view>
		    <slot name="pre"></slot>
		    <slot name="next"></slot>
		</view>

组件的传参

    //父传子 property
    //子传父 triggerEvent