自定义组件创建和注册组件 2.组件的数据以及方法 3.组件的属性 4.组件的属性 5.组件 wxml 的 slot-插槽

创建和注册组件

 1.如果是公共组件，建议放在项目根目录的 components 文件夹中
 2.如果是页面组件，建议放在对应页面的目录下
     建议:一个组件一个文件夹
 3.开发中常见的组件主要分为 公共组件 和 页面组件 两种，因此注册组件的方式也分为两种:
     1.全局注册:在 app.json 文件中配置 usingComponents 进行注册，注册后可以在任意页面使用
     2.局部注册:在页面的json 文件中配置 usingComponents进行注册，注册后只能在当前页面使用
 4.在 usingComponents 中进行组件注册时，需要提供 自定义组件的组件名 和 自定义组件文件路径
 5.在将组件注册好以后，直接将 自定义组件的组件名 当成 组件标签名 使用即可

2.组件的数据以及方法

    组件数据和方法需要在 组件.js 的 Component 方法中进行定义， Component 创建自定义组件
        1.data :定义组件的内部数据
        2.methods:在组件中事件处理程序需要写到 methods 中才可以

3.组件的属性

Properies 是指组件的对外属性，主要用来接收组件使用者传递给组件内部的数据，和 data 一同用于组件的模板渲染

4.组件的属性

1.Properies 是指组件的对外属性，主要用来接收组件使用者传递给组件内部的数据，和 data 一同用于组件的模板渲染
2.注意事项:设置属性类型需要使用 type 属性，属性类型是必填项，value 属性为默认值属性类型可以为 String、Number、Boolean、Object、Array ，也可以为 nu 表示不限制类型

5.组件 wxml 的 slot-插槽

1.在使用基础组件时，可以在组件中间写子节点，从而将子节点的内容展示到页面中，自定义组件也可以接收子节
2.只不过在组件模板中需要定义<slot/>节点，用于承载组件中间的子节点
3.默认情况下，一个组件的 wxml中只能有一个 slot(默认插槽)需要使用多 slot 时 ，可以在组件 js 中声明启用.
4.同时需要给 slot 添加 name 属性来区分不同的 slot (具名插槽)
5.然后给子节点内容添加 slot属性，属性值是对应 slot 的 name 名称，从而将内容插入到 对应的 slot 中

6.组件样式以及注意事项

1.自定义组件拥有自己的 wxss 样式，组件 wxss 文件的样式，默认只对当前组件生效
2.编写组件样式时，需要注意以下几点:
    1.app.wxss 或页面的 wxss 中使用了标签名(view)选择器(或一些其他特殊选择器)来直接指定样式
        这些选择器会影响到页面和全部组件，通常情况下这是不推荐的做法
    2.组件和引用组件的页面不能使用id 选择器(#a)、属性选择器([a]) 和 标签名选择器，请改用 class 选择器
    3.组件和引用组件的页面中使用后代选择器(a.b)在一些极端情况下会有非预期的表现，如遇，请避免使用
    4.子元素选择器(.a>.b)只能用于 vew 组件与其子节点之间，用于其他组件可能导致非预期的情况。
    5.继承样式，如 font、color ，会从组件外继承到组件内。
    6.除继承样式外，全局中的样式、组件所在页面的的样式对自定义组件无效(除非更改组件样式隔离选项)

7.组件样式隔离

默认情况下，自定义组件的样式只受自身 wxss 的影响，但是有时候我们需要组件使用者的样式能够影响到组件,这时候就需要指定特殊的样式隔离选项 stylelsolation，选择它支持以下取值:
    1.isolated: 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响(一般情况下的默认值)
    2. apply-shared: 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
    3.shared: 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared或 shared 的自定义组件。

8.数据监听器

1.数据监听器主要用于监听和响应任何属性(properies)和 数据(data)的变化，当数据发生变化时就会触发对应回调函数，从而方便开发者进行业务逻辑的处理
2.在组件中如果需要进行数据监听 需要使用 observers 字段

9.组件通信-父往子传值

父组件如果需要向子组件传递数据，只需要两个步骤:
    1.在父组件 WXML 中使用 数据绑定 的方式向子组件传递动态数据
    2.子组件内部使用 properties 接收父组件传递的数据即可

10.组件通信-子往父传值

子组件如果需要向父组件传递数据，可以通过小程序提供的事件系统实现，可以传递任意数据
    1.自定义组件内部使用 tiggerEvent 方法发射一个自定义的事件，同时可以携带数据
    2.自定义组件标签上通过 bind 方法监听 发射的事件，同时绑定事件处理函数，在事件函数函数中通过事件对象获取传递的数据

11.组件通信-获取组件实例

父组件可以 通过 this.selectComponent方法，获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法
this.selectComponent方法在调用时需要传入一个匹配选择器 selector

12.组件生命周期

1.组件的生命周期:指的是组件自身的一些钩子函数，这些函数在特定的时间节点时被自动触发
2.组件的生命周期函数需要在 lifetimes 字段内进行声明
3.组件的生命周期函数有5个:created、attached、ready、 moved、 detached
    小程序页面 -> created(组件实例创建完毕)  -> attached(模板解析完成挂载到页面)  ->  detached(组件被销毁)
        注意事项:created 钩子函数中不能调用 setData

13.组件所在页面的生命周期

1.组件还有一些特殊的生命周期，这类生命周期和组件没有很强的关联
2.主要用于组件内部监听父组件的展示、隐藏状态，从而方便组件内部执行一些业务逻辑的处理
3.组件所在页面的生命周期有4个:show、hide、resize、routeDone，需要在 pageLifetimes 字段内进行声明
    小程序页面展示  -> show(组件所在的页面被展示时执行)
    小程序页面隐藏  -> hide(组件所在的页面被隐藏时执行)

14.小程序生命周期总结

一个小程序完整的生命周期由 应用生命周期、页面生命周期 和 组件生命周期 三部分来组成
    1. 小程序冷启动，钩子函数执行的顺序
    2.保留当前页面，进入下一个页面，钩子函数执行的顺序
    3. 销毁当前页面，进入下一个页面，钩子函数执行的顺序
    4. 小程序热启动，钩子函数执行的顺序

15.小程序生命周期总结

1.小程序冷启动，钩子函数执行的顺序
onLaunch(小程序应用)  ->  onShow(小程序应用)  ->  created(小程序组件)  ->  attached(小程序组件)  ->  onLoad(小程序页面)  ->  onShow(小程序页面)   ->  ready(小程序组件)  ->   onReady(小程序页面)
2.保留当前页面-navigate
小程序页面: onHide     ->(进入新页面)      onLoad
3.关闭当前页面-redirect
onUnload(小程序页面)  ->   detached(小程序组件)    ->(进入新页面)   onLoad(小程序页面)
4.切后台
onHide(小程序应用)  <-   onHide(小程序页面)
5.热启动
onShow(小程序应用)  ->   onShow(小程序页面)

16.拓展:使用Component 构造页面

1.Component 方法用于创建自定义组件
2.小程序的页面也可以视为自定义组件，因此页面也可以使用 Component方法进行创建，从而实现复杂的页面逻辑开发
3.为什么需要使用 component 方法进行构造页面
    component 方法功能比 Page 方法强大很多
    如果使用 component 方法构造页面，可以实现更加复杂的页面逻辑开发
4.小程序页面也可以使用component 方法进行构造
5.注意事项:
    1.要求对应 json 文件中包含 usingComponents 定义段
    2.页面使用 Component 构造器创建，需要定义与普通组件一样的字段与实例方法
    3.页面 Page 中的一些生命周期方法(如 onLoad()等以“on“开头的方法)，在 Component 中要写在 methods 属性中才能生效
    4.组件的属性 Properties 可以用于接收页面的参数，在 onLoad() 中可以通过 this.data 拿到对应的页面参数

17.拓展:组件复用机制 behaviors

1.小程序的 behaviors 方法是一种代码复用的方式，可以将一些通用的逻辑和方法提取出来，然后在多个组件中复用，从而减少代码冗余提高代码的可维护性。
2.如果需要 behavior 复用代码，需要使用 Behavior()方法，每个 behavior 可以包含一组属性、数据、生命周期函数和方法
3.组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。
4.组件和它引用的 behavior 中可以包含同名的字段，对这些字段的处理方法如下
    1.如果有同名的属性或方法，采用“就近原则"，组件会覆盖 behavior 中的同名属性或方法
    2.如果有同名的数据字段且都是对象类型，会进行对象合并，其余情况会 采用“就近原则”进行数据覆盖
    3.生命周期函数和 observers 不会相互覆盖，会是在对应触发时机被逐个调用，也就是都会被执行

18.拓展:外部样式类

1.默认情况下，组件和组件使用者之间如果存在相同的类名不会相互影响，组件使用者如果想修改组件的样式，需要就解除样式隔离，但是解除样式隔离以后，在极端情况下，会产生样式冲突、CSS 嵌套太深等问题，从而给我们的开发带来一定的麻烦。
2.外部样式类:在使用组件时，组件使用者可以给组件传入CSS 类名，通过传入的类名修改组件的样式。
3.如果需要使用外部样式类修改组件的样式，在 Component 中需要用 extemalClasses 定义若干个外部样式类
4.外部样式类的使用步骤:
    1.在 Component 中用 extermalClasses 定义段定义若干个外部样式类1.
    2自定义组件标签通过 属性绑定 的方式提供一个样式类，属性是 externalClasses 定义的元素，属性值是传递的类名
    3.将接受到的样式类用于自定义组件内部
5.注意事项:
    在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的，因此需要添加!impartant 以保证外部样式类的优先级

19.总结自定义组

1.组件基本使用:数据、属性、方法、插槽
2.组件样式使用:组件样式、注意事项、样式隔离、外部样式类
3.组件通信传值:父往子传值、子往父传值、获取组件实例
4.组件生命周期:组件的生命周期、组件所在页面的生命周期、总结了小程序全部的生命周期
5.组件数据监听器:observers
6.组件拓展:使用 Component构造页面、组件复用机制 behaviors 等