小程序----自定义组件

自定义组件

微信官方文档-小程序自定义组件：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

• 组件：页面的一个"独立部分"，独立的界面结构、样式和逻辑。
• 组件化：将整个App各个页面的开发, 分解成一个个组件的开发。
• 优势：便于重用、维护及协作开发。
• 案例：多标签页展示案例
• 文件：【customDemo】为位于【pages】目录下的页面，【segmentPane】、【segmentBar】为位于【components】下的组件。
• 调用关系：【customDemo】调用【segmentPane】组件，【segmentPane】组件调用【segmentBar】组件。
• 
•  
• 步骤：
• 创建文件存放目录：项目根目录下, 创建components目录
• 定义组件：在components目录下, 创建组件名称文件夹，创建component，生成4个文件【js、json、wxml、wxss】
• 使用组件：在组件内或页面中使用；注册要使用的组件【标签名:组件路径】

         

组件样式注意：

• 组件样式,仅仅对组件的界面结构生效, 不会影响外界；
• 全局样式和使用组件的页面样式对组件无效；
• 特殊设置：

     （1）继承样式：font/color/text-align等；

     （2）外部样式类：想使用外界的样式类，通过externalClasses声明；

                      

   （3）全局样式类：如果希望组件外样式类能够完全影响组件内部，【options: { addGlobalClass: true}】

• 在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
• 后代选择器慎用

组件内部的数据渲染

   数据来源：外界传递【写在properties中】，组件内部使用【写在data中】

组件内行为通知外界(传递数据)

（1）组件内:this.triggerEvent("事件名称", detail信息{}, 触发事件的选项{})（2）组件外:<组件标签  bind事件名称="回调函数">

外界（组件或页面）调用组件方法：

使用组件时, 绑定id，页面内, 通过 this.selectComponent("#id") 来获取到组件对象

组件插槽slot

作用：可以让外界来自由定义组件的部分界面，组件加载子元素节点

使用：定义组件时使用slot标签, 预留插槽；使用组件时组件标签中间夹其他组件

多卡槽：每个slot绑定name，【<slot name="0"></slot> 】； js文件中, 配置，【options:{multipleSlots:true},】；使用组件时【 <view slot="0">2222</view>】