微信小程序（八）自定义组件

自定义组件

Component 构造器

Component参考文档

1.自定义组件的创建

组件定义:

{
    "component": true
}

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

页面使用：

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

<!-- 以下是对一个自定义组件的引用，两种方式都可以 -->
<zcw-bar></lzcw-bar>
<zcw-bar/>

2.页面向组件传递数据和样式

2-1.数据绑定

properties属性用于页面给自定义组件传递数据。

组件定义：

Component({
    properties: {
        //barInfo:Object
        barInfo:{
            type:Object,
            value:null,
            // 监听数据改变
            observer:function(newValue,oldValue){
                console.log('监听数据改变',newValue,oldValue);
            }
        }
    }
})

<view>{{barInfo}}</view>

页面使用：

<zcw-bar barInfo="{{barInfo}}"/>

2-2.样式传递

通过externalClasses属性进行样式传递。

组件定义：

Component({
    externalClasses:['barclass']
})

<view class='barclass'></view>

页面使用：

<zcw-bar barclass="color"/>

.color{
    color:red;
}

3.页面响应组件的事件

组件定义：

<view bindtap="bindSearch"/>

Component({
    methods: {
        bindSearch:function(){
            // 第一个参数：事件名称
            // 第二个参数：要传递的数据
            // 第三个参数：触发事件的选项，bubbles，composed，capturePhase
            this.triggerEvent("search",{name:"Zcw",age:18},{});
        }
    }
})

页面使用：

<zcw-bar bindsearch="bindSearch"/>

Page({
    bindSearch: function(event) {
        console.log("点击搜索按钮"，event);
    }
})

通过event中的detail就可以得到数据，打印结果如下：

detail数据.png

4.获取组件对象

• 父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

5.slot -- 插槽

5-1.单插槽

组件定义：

<view>
    <slot/>
</view>

页面使用：

<zcw-bar>
    <view>我会替换组件的slot</view>
</zcw-bar>

5-2.多插槽

组件定义：

<view>
    <!-- 使用name区分不同slot-->
    <slot name = "slot1"/>
    <slot name = "slot2"/>
</view>

Component({
    options:{
        // 在组件定义时的选项中启用多slot支持。
        multipleSlots:true
    }
})

<zcw-bar>
    <!-- 使用 slot属性 指定替换哪个slot标签 -->
    <view slot="slot1">我会替换组件的slot1</view>
    <view slot="slot2">我会替换组件的slot2</view>
</zcw-bar>

6.Component属性

• properties：定义传入的属性。
• data：定义内部的属性。
• methods：组件的方法，包括事件响应函数和任意的自定义方法，以及页面的生命周期方法（即 on 开头的方法，只有当Component定义的是页面才有效）
• options：额外配置选项。
• externalClasses：组件接受的外部样式类。
• observers：组件数据字段监听器，用于监听 properties 和 data 的变化。只能拿到newValue。
• pageLifetimes：组件所在页面的生命周期声明对象。
• lifetimes：组件生命周期声明对象。

7.自定义组件的注意事项

• 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
• 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
• 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。