[小程序开发] 自定义组件

一、常见的组件

        1、公共组件：将页面内的功能模块抽取成自定义组件，以便在不同的页面中重复使用。

        2、页面组件：将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

• 公共组件建议放在项目根目录的components文件夹中。
• 页面组件建议防止对应页面的目录下。

二、注册组件

        1、全局注册：在app.json文件中配置usingComponents进行注册，注册后可以在任意页面使用。

        2、局部注册：在页面的json文件中配置usingComponents进行注册，注册后只能在当前页面使用。

在usingComponents中进行组件注册时，需要提供自定义组件的组件名和自定义组件文件路径。将组件注册好以后，直接将自定义组件的组件名当成组件标签名使用即可

"usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  }

三、组件数据和方法

        组件数据和方法需要在组件.js的Component方法中进行定义。

        Component创建自定义组件：

                data：定义组件的内部数据。

                methods：在组件中事件处理程序需要写道methods中。

四、组件属性

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

    properties: {
        // 如果需要接受传递的属性，有两种方式：全写、简写
        // 全写
        label:{
            // type 组件使用者传递的数据类型；value 默认值
            // 数据类型：String、Number、Boolean、Object、Array、null(表示不限制)
            type:String,
            value:''
        },
        position:{
            type:String,
            value:"right"
        }
        // 简写
        // label:String

    }

五、slot（插槽）

        在组件模板中定义<slot />节点，用于承载组件中间的子节点。

        默认情况下，一个组件的wxml中只能由一个slot（默认插槽），需要使用多个slot时，可以在组件js中声明启用。同时需要给slot添加name属性来区分不同的slot（具名插槽），然后给子节点内容添加slot属性，属性值时对应slot的name名称，从而将内容插入到对应的slot中。

组件页面 

<view>
<!-- slot 用来接收、承载子节点内容。slot只是一个占位符，子节点内容会将slot进行替换。-->
<!-- 默认插槽 -->
	<slot name="slot-top" />
	<view><slot /></view>
	<slot name="slot-bottom" />
</view>

 展示页面

<custom>
<text slot="slot-top">我需要显示到顶部</text>
<!-- 默认情况下，自定义组件的字节内容不会进行展示，如果想内容进行展示，需要在组件模板中定义slot节点 -->
我是子节点内容
<text slot="slot-bottom">我需要显示到底部</text>
</custom>

六、注意事项

1：在自定义的wxss文件中，不允许使用标签选择器、ID选择器、属性选择器
2：子选择器只能用于view和子组件，用于其他组件可能会出现样式失效的问题
3：继承样式，例如：color/font都会从组件外继承
4：全局样式、组件所在页面的样式文件中的样式都对自定义组件无效
5：官方不建议在全局样式文件以及父级页面之间使用标签选择器设置样式。如果是在全局样式文件中设置样式，会影响项目中全部的相同组件；如果实在页面样式文件中设置样式，会影响当前页面所有的相同组件。
6：组件和组件使用者如果使用了后代选择器，可能会出现一些非预期情况，如果出现，请避免。可在后面再添加一个类名。