微信小程序自定义组件的基本使用

组件与模块类似，实现了功能的复用，提高开发速率，减少代码量

在开发过程中，总会遇到一些功能板块是相同或很类似的。如两个不同页面都有搜索框，或者导航栏等。

那么这个使用就很有必要使用组件了

组件文件创建

一般在根目录下创建一个 components 文件夹，用于保存各组件

组件模板

<!-- 组件内 -->
<view><view>组件内部</view>
<view>

组件使用

定义组件

在使用组件前，需要在使用组件的页面的 json 文件中进行定义。

// index.json"usingComponents": {"myCom":"../../components/com-1/com-1"// 组件名   路径(一般相对路径)}

也可以在 app.json 文件中进行去全局定义。那么就无需在页面的 json文件配置了

配置的方法相同

在页面使用

<!-- 使用组件的页面 --><view><myCom></myCom>
</view><!-- 组件的内容会在页面显示 -->

插槽

插槽相当于是组件留出的一个位置，可以让页面向其提供其他页面结果。

插槽使用 slot 标签放在组件内，页面在使用组件时，在组件标签内传递标签等代码

<!-- 组件页面 -->
<view><view>我是组件内的标签</view><slot></slot>    <!-- 插槽 -->
</view>

将代码写入插槽

<!-- 使用组件的页面 -->
<view><myCom><view>我是页面传入的内容</view>  </myCom>
</view>

这里相当于把 <view>我是页面插入的内容<view> 这段代码代替了组件的 slot 标签部分。然后再在使用的组件那显示出来

注意

与 vue 不同，默认情况下，一个组件只能使用一个 slot.
如果要使用多个 slot , 需要在组件的 js 文件中，增加以下代码（与 data 同级）
```
  options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持},
```

具名插槽

当使用多个插槽时，开启方法如上。为了让代码插入正确的插槽。可以使用具名插槽

即插槽增加一个 name 属性。父组件通过 slot 属性。进行配对。

否则。所有代码可能只会传到第一个 slot 中。

  <slot name="s1"></slot> <!-- 插槽 --><slot name="s2"></slot> <!-- 插槽 -->

  <myCom><view slot ="s2">我是页面传入的内容1</view><view slot = 's1'>我是页面传入的内容2</view></myCom>

结果是内容2 在内容 1 上面。

组价样式

组件的样式有些需要特别注意的地方

#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */

组件样式受到影响

默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响

也有特殊情况页面样式会影响到子组件

样式继承，如 font .color
app.wxss

styleIsolation

配置组件的样式情况的一个配置

{"stylelsolation":"值"
}

对于值，有以下这些情况

值	作用
isolated	表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）
apply-shared	表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
shared	表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了`apply-shared` 或 `shared` 的自定义组件。

此外，小程序基础库版本 2.2.3 以上支持 addGlobalClass 选项，即在 Component 的 options 中设置 addGlobalClass: true 。这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation 选项后这个选项会失效。

外部样式类

有时，组件希望接受外部传入的样式类。此时可以在 Component 中用 externalClasses 定义段定义若干个外部样式类。

// 组件 js 文件
Component({externalClasses: ['out-class']
})// 组件
<view class = "out-class">这里的类名由外部决定，样式也由外部决定</view>

<!-- 页面使用组件 -->
<myCom out-class = "class1"></myCom>
<myCom out-class = "class2"></myCom>
<!--     2.7.1 版本以上-->
<myCom out-class = "class3 class4"></myCom>

样式引用

即使开启了样式隔离。也组件也可以引用父组件或页面上的样式

<view class="~page-class"> 引用页面的类名为 page-class 的样式 </view><view class="^father-com"> 引用父节点类名为 father-com 的样式 </view>

也可以连续使用多个 ^ 来引用祖先组件中的样式

父向子传数据

传递

页面向子组件传递参数的方式是通过属性传递 。

<myCom name="名字" age="{{age}}"></myCom>  <!--age 是变量 ， 值是 123-->

接收

子组件接收页面传递的参数是通过 js 文件中的 properties 对象接收，接收到的数据相可以直接使用。

// 组件的 js 代码是在 conponent 函数内的Component({properties: {name:{type:String,value:"小红"},age:{type:Number,value:321}},
}）

properties 参数对象里面的参数也是以对象的形式进行定义

其中 name 接收父组件传递的 name 参数， type 限制参数数据类型， value 设置默认值。

<!--在组件内使用 -->
<view>{{name}} 和 {{age}}</view><!-- 显示 -->
<!-- 名字 和 123 -->

子向父传递参数

子向父传递数据通过事件。子组件可以在满足一下函数或事件时，触父页面定义的事件，同时可以向事件传递参数。

1. 页面设置接收事件

bind+自定义事件名 = "事件处理函数名"

<myCom bindmyEvent = "getData"><myCom><!-- 或者 --><myCom bind:myEvent = "getData"><myCom>

2. 组件触发自定义事件

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项

<button bindtap="onTap">点击这个按钮将触发“myEvent”事件</button>

// 当 tap 时 ，就可以触发自定义事件  ，并且想向父页面出传递参数
Component({methods:{  // 组件定义方法的对象 ， 组件所有方自定义方法都放在这里onTap(){var data = {...}  // 需要给父组件传递的 detail 参数var eventOption = {...}   // 事件选项this.triggerEvent('myEvent' , data , eventOption)  // 自定义事件名 ，detail 参数 ， 事件选项}}
})

事件选项包括

选项名	类型	是否必填	默认值	描述
bubbles	Boolean	否	false	事件是否冒泡
composed	Boolean	否	false	事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部
capturePhase	Boolean	否	false	事件是否拥有捕获阶段

3. 页面接收参数

Page({getData(e){e.detail // 自定义组件触发事件时提供的detail对象}
})

组件生命周期

组件有3个比较重要的声明周期：

组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

定义生命周期方法

Component({lifetimes: {attached() {// 在组件实例进入页面节点树时执行},detached() {// 在组件实例被从页面节点树移除时执行},},// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容attached() {// 在组件实例进入页面节点树时执行},detached() {// 在组件实例被从页面节点树移除时执行},// ...
})

3个与页面关联的生命周期

show ：当组件所在页面被显示时
hide ：组件所在的页面被隐藏时执行
resize : 组件所在的页面尺寸变化时执行

这些声明周期也定义在 pageLifetimes