自定义组件

自定义组件

组件样式

• 样式隔离

options:{
stllelsolation:"isolated"//apply-shared父影响子 shared父子相互影响 isloated相互隔离
}

• 外部类

externalClasses:["cell-class"]//定义

<view class="cell cell-class"></view >

页面中

<cell cell-class="mycell"></cell>
.nycell{
样式
}

组件的插槽

• 默认插槽
  父组件 < cell > < text>插槽内容< /text> < /cell >
  子组件< view> < slot>< /slot>< /view>
• 命名多插槽
  options:{multipleSlots:true}
  父组件 < cell > < text slot=“one”>插槽内容< /text> < text slot=“two”>插槽内容< /text>< /cell >
  子组件< view> < slot name=“one”>< /slot>< slot name=“two”>< /slot>< /view>

组件传参

• 父传子 property
• 子传参父 triggEvent

组件的使用

定义组件

• （js,wxml,json,wxss）
• 页面的xxx.json usingComponent注册

"usingComponent":{
"cell":组件路径
}

• 使用组件 < cell>< /cell>

自定义组件 Component

• 生命周期 lifeitems attach组件的挂载
• data数据
• methods 方法
• properties 属性 只读
• externalClasses 外部类
• options 选项 multipleSlots：true 多个插槽 stylesolation：“isolateed” 组件样式格式

自定义组件生命周期

组件的生命周期 lifeitems

• created 创建 此时还不能调用 setData
• attached 挂载
• detached 卸载

页面生命周期

• show 显示
• hide 后台运行
• resize 尺寸 变化