微信小程序从入门到学会第七天小程序的自定义组件

　　一、前言
　　当我们多次使用同一个组件的时候，我们可以将其进行封装然后进行使用，这个时候，自定义组件就起到了很好的作用，前面虽然我们讲到了自定义组件，不过那都是皮毛，仅仅只是讲到了自定义组件的创建和使用罢了，下面我们来深入剖析自定义组件。首先看下目录：自定义组件的参数自定义组件的生命周期插槽
　　匿名插槽
　　具名插槽
　　外部样式
　　多样化的组件通信
　　1。双向绑定
　　2。父子组件互相传
　　组件共享
　　组件关系二、自定义组件的参数
　　定义段
　　类型
　　是否必填
　　描述
　　最低版本
　　properties
　　ObjectMap
　　否
　　组件的对外属性，是属性名到属性设置的映射表
　　data
　　Object
　　否
　　组件的内部数据，和properties一同用于组件的模板渲染
　　observers
　　Object
　　否
　　组件数据字段监听器，用于监听properties和data的变化
　　2。6。1
　　methods
　　Object
　　否
　　组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用
　　behaviors
　　StringArray
　　否
　　类似于mixins和traits的组件间代码复用机制
　　created
　　Function
　　否
　　组件生命周期函数在组件实例刚刚被创建时执行，注意此时不能调用setData）
　　attached
　　Function
　　否
　　组件生命周期函数在组件实例进入页面节点树时执行）
　　ready
　　Function
　　否
　　组件生命周期函数在组件布局完成后执行）
　　moved
　　Function
　　否
　　组件生命周期函数在组件实例被移动到节点树另一个位置时执行）
　　detached
　　Function
　　否
　　组件生命周期函数在组件实例被从页面节点树移除时执行）
　　relations
　　Object
　　否
　　组件间关系
　　externalClasses
　　StringArray
　　否
　　组件接受的外部样式类
　　options
　　ObjectMap
　　否
　　选项
　　lifetimes
　　Object
　　否
　　组件生命周期声明对象
　　2。2。3
　　pageLifetimes
　　Object
　　否
　　组件所在页面的生命周期声明对象
　　2。2。3
　　definitionFilter
　　Function
　　否
　　定义段过滤器，用于自定义组件扩展
　　2。2。3
　　生成的组件实例可以在组件的方法、生命周期函数和属性observer中通过this访问。组件还有一些通用属性和方法，如下：
　　属性名
　　类型
　　描述
　　is
　　String
　　组件的文件路径
　　id
　　String
　　节点id
　　dataset
　　String
　　节点dataset
　　data
　　Object
　　组件数据，包括内部数据和属性值
　　properties
　　Object
　　组件数据，包括内部数据和属性值（与data一致）
　　router
　　Object
　　相对于当前自定义组件的Router对象
　　pageRouter
　　Object
　　相对于当前自定义组件所在页面的Router对象
　　方法名
　　参数
　　描述
　　最低版本
　　setData
　　ObjectnewData
　　设置data并执行视图层渲染
　　hasBehavior
　　Objectbehavior
　　检查组件是否具有behavior（检查时会递归检查被直接或间接引入的所有behavior）
　　triggerEvent
　　Stringname，Objectdetail，Objectoptions
　　触发事件
　　createSelectorQuery
　　创建一个SelectorQuery对象，选择器选取范围为这个组件实例内
　　createIntersectionObserver
　　创建一个IntersectionObserver对象，选择器选取范围为这个组件实例内
　　createMediaQueryObserver
　　创建一个MediaQueryObserver对象
　　2。11。1
　　selectComponent
　　Stringselector
　　使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象（会被wx：componentexport影响）
　　selectAllComponents
　　Stringselector
　　使用选择器选择组件实例节点，返回匹配到的全部组件实例对象组成的数组（会被wx：componentexport影响）
　　selectOwnerComponent
　　选取当前组件节点所在的组件实例（即组件的引用者），返回它的组件实例对象（会被wx：componentexport影响）
　　2。8。2
　　getRelationNodes
　　StringrelationKey
　　获取这个关系所对应的所有关联节点
　　groupSetData
　　Functioncallback
　　立刻执行callback，其中的多个setData之间不会触发界面绘制（只有某些特殊场景中需要，如用于在不同组件同时setData时进行界面绘制同步）
　　2。4。0
　　getTabBar
　　返回当前页面的customtabbar的组件实例
　　2。6。2
　　getPageId
　　返回页面标识符（一个字符串），可以用来判断几个自定义组件实例是不是在同一个页面内
　　2。7。1
　　animate
　　Stringselector，Arraykeyframes，Numberduration，Functioncallback
　　执行关键帧动画
　　2。9。0
　　clearAnimation
　　StringselectorObjectoptions，Functioncallback
　　清除关键帧动画
　　2。9。0
　　setUpdatePerformanceListener
　　ObjectoptionsFunctionlistener
　　清除关键帧动画
　　2。12。0
　　注：以上内容来源于微信开放文档二、自定义组件的参数
　　定义段
　　类型
　　是否必填
　　描述
　　最低版本
　　properties
　　ObjectMap
　　否
　　组件的对外属性，是属性名到属性设置的映射表
　　data
　　Object
　　否
　　组件的内部数据，和properties一同用于组件的模板渲染
　　observers
　　Object
　　否
　　组件数据字段监听器，用于监听properties和data的变化
　　2。6。1
　　methods
　　Object
　　否
　　组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用
　　behaviors
　　StringArray
　　否
　　类似于mixins和traits的组件间代码复用机制
　　created
　　Function
　　否
　　组件生命周期函数在组件实例刚刚被创建时执行，注意此时不能调用setData）
　　attached
　　Function
　　否
　　组件生命周期函数在组件实例进入页面节点树时执行）
　　ready
　　Function
　　否
　　组件生命周期函数在组件布局完成后执行）
　　moved
　　Function
　　否
　　组件生命周期函数在组件实例被移动到节点树另一个位置时执行）
　　detached
　　Function
　　否
　　组件生命周期函数在组件实例被从页面节点树移除时执行）
　　relations
　　Object
　　否
　　组件间关系
　　externalClasses
　　StringArray
　　否
　　组件接受的外部样式类
　　options
　　ObjectMap
　　否
　　选项
　　lifetimes
　　Object
　　否
　　组件生命周期声明对象
　　2。2。3
　　pageLifetimes
　　Object
　　否
　　组件所在页面的生命周期声明对象
　　2。2。3
　　definitionFilter
　　Function
　　否
　　定义段过滤器，用于自定义组件扩展
　　2。2。3
　　生成的组件实例可以在组件的方法、生命周期函数和属性observer中通过this访问。组件还有一些通用属性和方法，如下：
　　属性名
　　类型
　　描述
　　is
　　String
　　组件的文件路径
　　id
　　String
　　节点id
　　dataset
　　String
　　节点dataset
　　data
　　Object
　　组件数据，包括内部数据和属性值
　　properties
　　Object
　　组件数据，包括内部数据和属性值（与data一致）
　　router
　　Object
　　相对于当前自定义组件的Router对象
　　pageRouter
　　Object
　　相对于当前自定义组件所在页面的Router对象
　　方法名
　　参数
　　描述
　　最低版本
　　setData
　　ObjectnewData
　　设置data并执行视图层渲染
　　hasBehavior
　　Objectbehavior
　　检查组件是否具有behavior（检查时会递归检查被直接或间接引入的所有behavior）
　　triggerEvent
　　Stringname，Objectdetail，Objectoptions
　　触发事件
　　createSelectorQuery
　　创建一个SelectorQuery对象，选择器选取范围为这个组件实例内
　　createIntersectionObserver
　　创建一个IntersectionObserver对象，选择器选取范围为这个组件实例内
　　createMediaQueryObserver
　　创建一个MediaQueryObserver对象
　　2。11。1
　　selectComponent
　　Stringselector
　　使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象（会被wx：componentexport影响）
　　selectAllComponents
　　Stringselector
　　使用选择器选择组件实例节点，返回匹配到的全部组件实例对象组成的数组（会被wx：componentexport影响）
　　selectOwnerComponent
　　选取当前组件节点所在的组件实例（即组件的引用者），返回它的组件实例对象（会被wx：componentexport影响）
　　2。8。2
　　getRelationNodes
　　StringrelationKey
　　获取这个关系所对应的所有关联节点
　　groupSetData
　　Functioncallback
　　立刻执行callback，其中的多个setData之间不会触发界面绘制（只有某些特殊场景中需要，如用于在不同组件同时setData时进行界面绘制同步）
　　2。4。0
　　getTabBar
　　返回当前页面的customtabbar的组件实例
　　2。6。2
　　getPageId
　　返回页面标识符（一个字符串），可以用来判断几个自定义组件实例是不是在同一个页面内
　　2。7。1
　　animate
　　Stringselector，Arraykeyframes，Numberduration，Functioncallback
　　执行关键帧动画
　　2。9。0
　　clearAnimation
　　StringselectorObjectoptions，Functioncallback
　　清除关键帧动画
　　2。9。0
　　setUpdatePerformanceListener
　　ObjectoptionsFunctionlistener
　　清除关键帧动画
　　2。12。0
　　注：以上内容来源于微信开放文档二、自定义组件的参数
　　定义段
　　类型
　　是否必填
　　描述
　　最低版本
　　properties
　　ObjectMap
　　否
　　组件的对外属性，是属性名到属性设置的映射表
　　data
　　Object
　　否
　　组件的内部数据，和properties一同用于组件的模板渲染
　　observers
　　Object
　　否
　　组件数据字段监听器，用于监听properties和data的变化
　　2。6。1
　　methods
　　Object
　　否
　　组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用
　　behaviors
　　StringArray
　　否
　　类似于mixins和traits的组件间代码复用机制
　　created
　　Function
　　否
　　组件生命周期函数在组件实例刚刚被创建时执行，注意此时不能调用setData）
　　attached
　　Function
　　否
　　组件生命周期函数在组件实例进入页面节点树时执行）
　　ready
　　Function
　　否
　　组件生命周期函数在组件布局完成后执行）
　　moved
　　Function
　　否
　　组件生命周期函数在组件实例被移动到节点树另一个位置时执行）
　　detached
　　Function
　　否
　　组件生命周期函数在组件实例被从页面节点树移除时执行）
　　relations
　　Object
　　否
　　组件间关系
　　externalClasses
　　StringArray
　　否
　　组件接受的外部样式类
　　options
　　ObjectMap
　　否
　　选项
　　lifetimes
　　Object
　　否
　　组件生命周期声明对象
　　2。2。3
　　pageLifetimes
　　Object
　　否
　　组件所在页面的生命周期声明对象
　　2。2。3
　　definitionFilter
　　Function
　　否
　　定义段过滤器，用于自定义组件扩展
　　2。2。3
　　生成的组件实例可以在组件的方法、生命周期函数和属性observer中通过this访问。组件还有一些通用属性和方法，如下：
　　属性名
　　类型
　　描述
　　is
　　String
　　组件的文件路径
　　id
　　String
　　节点id
　　dataset
　　String
　　节点dataset
　　data
　　Object
　　组件数据，包括内部数据和属性值
　　properties
　　Object
　　组件数据，包括内部数据和属性值（与data一致）
　　router
　　Object
　　相对于当前自定义组件的Router对象
　　pageRouter
　　Object
　　相对于当前自定义组件所在页面的Router对象
　　方法名
　　参数
　　描述
　　最低版本
　　setData
　　ObjectnewData
　　设置data并执行视图层渲染
　　hasBehavior
　　Objectbehavior
　　检查组件是否具有behavior（检查时会递归检查被直接或间接引入的所有behavior）
　　triggerEvent
　　Stringname，Objectdetail，Objectoptions
　　触发事件
　　createSelectorQuery
　　创建一个SelectorQuery对象，选择器选取范围为这个组件实例内
　　createIntersectionObserver
　　创建一个IntersectionObserver对象，选择器选取范围为这个组件实例内
　　createMediaQueryObserver
　　创建一个MediaQueryObserver对象
　　2。11。1
　　selectComponent
　　Stringselector
　　使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象（会被wx：componentexport影响）
　　selectAllComponents
　　Stringselector
　　使用选择器选择组件实例节点，返回匹配到的全部组件实例对象组成的数组（会被wx：componentexport影响）
　　selectOwnerComponent
　　选取当前组件节点所在的组件实例（即组件的引用者），返回它的组件实例对象（会被wx：componentexport影响）
　　2。8。2
　　getRelationNodes
　　StringrelationKey
　　获取这个关系所对应的所有关联节点
　　groupSetData
　　Functioncallback
　　立刻执行callback，其中的多个setData之间不会触发界面绘制（只有某些特殊场景中需要，如用于在不同组件同时setData时进行界面绘制同步）
　　2。4。0
　　getTabBar
　　返回当前页面的customtabbar的组件实例
　　2。6。2
　　getPageId
　　返回页面标识符（一个字符串），可以用来判断几个自定义组件实例是不是在同一个页面内
　　2。7。1
　　animate
　　Stringselector，Arraykeyframes，Numberduration，Functioncallback
　　执行关键帧动画
　　2。9。0
　　clearAnimation
　　StringselectorObjectoptions，Functioncallback
　　清除关键帧动画
　　2。9。0
　　setUpdatePerformanceListener
　　ObjectoptionsFunctionlistener
　　清除关键帧动画
　　2。12。0
　　注：以上内容来源于微信开放文档二、自定义组件的参数
　　定义段
　　类型
　　是否必填
　　描述
　　最低版本
　　properties
　　ObjectMap
　　否
　　组件的对外属性，是属性名到属性设置的映射表
　　data
　　Object
　　否
　　组件的内部数据，和properties一同用于组件的模板渲染
　　observers
　　Object
　　否
　　组件数据字段监听器，用于监听properties和data的变化
　　2。6。1
　　methods
　　Object
　　否
　　组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用
　　behaviors
　　StringArray
　　否
　　类似于mixins和traits的组件间代码复用机制
　　created
　　Function
　　否
　　组件生命周期函数在组件实例刚刚被创建时执行，注意此时不能调用setData）
　　attached
　　Function
　　否
　　组件生命周期函数在组件实例进入页面节点树时执行）
　　ready
　　Function
　　否
　　组件生命周期函数在组件布局完成后执行）
　　moved
　　Function
　　否
　　组件生命周期函数在组件实例被移动到节点树另一个位置时执行）
　　detached
　　Function
　　否
　　组件生命周期函数在组件实例被从页面节点树移除时执行）
　　relations
　　Object
　　否
　　组件间关系
　　externalClasses
　　StringArray
　　否
　　组件接受的外部样式类
　　options
　　ObjectMap
　　否
　　选项
　　lifetimes
　　Object
　　否
　　组件生命周期声明对象
　　2。2。3
　　pageLifetimes
　　Object
　　否
　　组件所在页面的生命周期声明对象
　　2。2。3
　　definitionFilter
　　Function
　　否
　　定义段过滤器，用于自定义组件扩展
　　2。2。3
　　生成的组件实例可以在组件的方法、生命周期函数和属性observer中通过this访问。组件还有一些通用属性和方法，如下：
　　属性名
　　类型
　　描述
　　is
　　String
　　组件的文件路径
　　id
　　String
　　节点id
　　dataset
　　String
　　节点dataset
　　data
　　Object
　　组件数据，包括内部数据和属性值
　　properties
　　Object
　　组件数据，包括内部数据和属性值（与data一致）
　　router
　　Object
　　相对于当前自定义组件的Router对象
　　pageRouter
　　Object
　　相对于当前自定义组件所在页面的Router对象
　　方法名
　　参数
　　描述
　　最低版本
　　setData
　　ObjectnewData
　　设置data并执行视图层渲染
　　hasBehavior
　　Objectbehavior
　　检查组件是否具有behavior（检查时会递归检查被直接或间接引入的所有behavior）
　　triggerEvent
　　Stringname，Objectdetail，Objectoptions
　　触发事件
　　createSelectorQuery
　　创建一个SelectorQuery对象，选择器选取范围为这个组件实例内
　　createIntersectionObserver
　　创建一个IntersectionObserver对象，选择器选取范围为这个组件实例内
　　createMediaQueryObserver
　　创建一个MediaQueryObserver对象
　　2。11。1
　　selectComponent
　　Stringselector
　　使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象（会被wx：componentexport影响）
　　selectAllComponents
　　Stringselector
　　使用选择器选择组件实例节点，返回匹配到的全部组件实例对象组成的数组（会被wx：componentexport影响）
　　selectOwnerComponent
　　选取当前组件节点所在的组件实例（即组件的引用者），返回它的组件实例对象（会被wx：componentexport影响）
　　2。8。2
　　getRelationNodes
　　StringrelationKey
　　获取这个关系所对应的所有关联节点
　　groupSetData
　　Functioncallback
　　立刻执行callback，其中的多个setData之间不会触发界面绘制（只有某些特殊场景中需要，如用于在不同组件同时setData时进行界面绘制同步）
　　2。4。0
　　getTabBar
　　返回当前页面的customtabbar的组件实例
　　2。6。2
　　getPageId
　　返回页面标识符（一个字符串），可以用来判断几个自定义组件实例是不是在同一个页面内
　　2。7。1
　　animate
　　Stringselector，Arraykeyframes，Numberduration，Functioncallback
　　执行关键帧动画
　　2。9。0
　　clearAnimation
　　StringselectorObjectoptions，Functioncallback
　　清除关键帧动画
　　2。9。0
　　setUpdatePerformanceListener
　　ObjectoptionsFunctionlistener
　　清除关键帧动画
　　2。12。0
　　注：以上内容来源于微信开放文档
　　三、自定义组件的生命周期
　　组件也有许多生命周期函数，如下：
　　生命周期
　　参数
　　描述
　　最低版本
　　created
　　无
　　在组件实例刚刚被创建时执行
　　1。6。3
　　attached
　　无
　　在组件实例进入页面节点树时执行
　　1。6。3
　　ready
　　无
　　在组件在视图层布局完成后执行
　　1。6。3
　　moved
　　无
　　在组件实例被移动到节点树另一个位置时执行
　　1。6。3
　　detached
　　无
　　在组件实例被从页面节点树移除时执行
　　1。6。3
　　error
　　ObjectError
　　每当组件方法抛出错误时执行
　　2。4。1
　　这些生命周期函数可以在自定义组件的参数外，也可以在组件的lifetimes参数内，这样优先级更高；还有一类是组件所在页面生命周期函数，如下：
　　生命周期
　　参数
　　描述
　　最低版本
　　show
　　无
　　组件所在的页面被展示时执行
　　2。2。3
　　hide
　　无
　　组件所在的页面被隐藏时执行
　　2。2。3
　　resize
　　ObjectSize
　　组件所在的页面尺寸变化时执行
　　2。4。0
　　这类生命周期函数必须在参数pageLifetimes内。
　　注：以上内容来源于微信开放文档
　　更多精彩好文敬请关注公众号简易编程网