微信小程序自定义组件

案例：
自定义tabbar组件 https://blog.csdn.net/qq_39232387/article/details/109121257
自定义组件导航栏切换 https://blog.csdn.net/qq_39232387/article/details/109121257

一、创建组件：
比如创建mybox这个组件

1.根目录下创建一个components文件夹(和pages同级)，用来存放所有自定义的组件。
2.components文件夹右键创建一个mybox文件夹。
3.mybox文件夹 右键->新建Component创建组件。这样创建的目的是在json文件中添加"component": true，将其申明为一个组件。

二、使用组件：
比如index页面需要使用这个组件
1.在index.json文件中注册组件。添加类似如下代码：

 {
   "usingComponents": {
     "mybox": "/components/mybox/mybox"
   }
 }

2.然后在index.wxml文件中使用组件：

<mybox></mybox>

三、给自定义组件添加属性：
1.在组件的js文件中，在properties中添加属性，添加属性的时候，需要指定两个值，一个是type，代表的是这个属性的类型，一个是value，代表的是这个属性的默认值。示例代码如下：

Component({
 properties: {
   showInner: {
     type: Boolean,
     value: false
   }
 }
})

2.然后在wxml模板中就可以使用了。示例代码如下：

<view class="outter">
 <view wx:if="" class="inner">知了课堂</view>
</view>

3.在使用组件的时候，可以直接在组件上给这个属性设置值：

<mybox showInner="true"></mybox>

4.还有另外一种使用data的形式，data中的数据可以渲染到组件的代码中，但是使用data不能作为属性来使用。

三、在组件中添加节点：
在使用小程序内置的组件的时候，比如view，我们还可以在view中添加其他的组件。这个功能可以通过slot节点来实现。示例代码如下：

<view class="outter">
  <view wx:if="" class="inner">知了课堂</view>
  <slot></slot>
</view>

以后在使用这个组件的时候，还可以添加自己的节点。示例代码如下：

<mybox showInner="true">
  <view>这是index中添加的</view>
</mybox>

以上是添加一个slot，如果想要添加多个slot，那么需要在js文件中添加一个multipleSlots属性，示例代码如下：

Component({
  options: {
    multipleSlots: true
  },
  ...

然后在wxml文件中，需要给每一个slot都指定name。示例代码如下：

<view class="outter">
<slot name="before"></slot>
  <view wx:if="" class="inner">课堂</view>
  <slot name="after"></slot>
</view>

最后在使用这个组件的时候，也需要指定放在那个slot中。示例代码如下：

<mybox showInner="true">
  <view slot="before">这是before的组件</view>
  <view slot="after">这是after的组件</view>
</mybox>

组件样式注意事项：
1.组件对应 wxss 文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点：

2.组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
3.组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
4.子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
继承样式，如 font 、 color ，会从组件外继承到组件内。
5.除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。

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

事件：
1.引用组件的页面，可以直接绑定事件。

<my-component bindtap="tapEvent"></my-component>

2.自定义组件事件。直接在组件内绑定事件。并且如果我们想在组件内捕获到事件后，要通知到父组件，那么可以通过triggerEvent方法来触发自定义的事件。示例代码如下：

// 组件代码
<view class="outter">
 <view class="inner" bindtap="onInnerTapEvent"></view>
</view>

然后在组件的js文件中，使用以下代码进行捕获和传递给父组件。示例代码如下：

Component({
 method: {
   onInnerTapEvent: function(event){
     console.log("组件内监听到了innerTapEvent事件");
     var detail = {} // detail对象，提供给事件监听函数
     var option = {} // 触发事件的选项
     this.triggerEvent("customevent",detail,option);
   }
 }
})

然后在使用组件的地方，需要给自定义事件绑定监听方法。示例代码如下：

<my-component bindcustomevent="onCustomEventEvent">
</my-component>

其中的detail是在触发innerEvent事件的时候，传递给外面接收这个事件的对象一些额外的信息，option是一些选项。这些选项可以如下：

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

生命周期：
组件本身的生命周期：
组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

其中，最重要的生命周期是created/attached/detached，包含一个组件实例生命流程的最主要时间点。（注意：在2.2.3基础库之前，生命周期函数写在Component中就可以，在2.2.3后应该写在lifetimes中。）

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

lifetimes: {
    created: function() {
      console.log("刚被创建好")
    },
    attached: function() {
    },
    detached: function() {
    }
}

监听组件所在页面的生命周期：
还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括：

pageLifetimes : {
    show: function() {
    }
}