小程序自定义组件

组件的使用

1.定义组件（js,wxml,json,wxss）1个组件中应该要包含这四个

步骤的话可以先建一个component文件夹
在里面创建你所需要的文件夹然后在文件夹中新建component

创建完组件一定要去app.json里面看自己有没有加上去一般是自己生成的，我的没有生成就自己加了

2.注册组件，在哪里使用就要在哪里注册

页面的xxx.json
usingComponent 注册

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

3.使用组件
注册组件第一项就是你的名字
使用的话就是<cell></cell>
<item></item>

自定义组件

1.组件的样式

样式的隔离
 styleIsolation:{"isolated"},
//applys-shared 父影响子,shared父子相互影响,isolated相互隔离
外部类
在组件的js中externalClasses:["cell-class"]
组件wxml中<view class="cell cell-class">我是cell组件</view>
使用的页面中<cell cell-class="mycell"></cell>
使用页面的wxss中
.mycell{
line-height:120rpx!important;
color:#f70
}

2.组件的插槽

一般来说都存在默认的插槽在每个结构里面的代码如下图所示

父组件（即谁使用的组件）
<cell>
 <text>插槽内容</text>
</cell>
子组件
<view><slot></slot></view>

也可以使用多个插槽
命名多插槽

父组件
<cell>
<text slot='pre"><text>
<text slot='next"><text>
</cell>
子组件的js中options:{multipleSlots:true}
wxml
<view>
<slot name="pre"></slot>
<slot name-"text"></slot>
</view>

组件的传参

父传子
property 子组件中

子传参父
triggerEvent

父组件中用这种方式接收事件
<cell title="阶级不同立场也不同" bind:cellclick='cellHd' ></cell>

自定义组件js中的一些内容

lifetimes 生命周期
1.created创建（还不能用setData）
2.attach组件的挂载
3.detached卸载
data 数据
methods 方法
properties 属性(只读)
extermalClasses外部类
options ：
1.multipleSlots:true 多插槽
2.styleIsolation:{“isolated”},组件的样式
里面的内容有很多还需要自己去探索