初入小程序 | 文档使用 | 注意汇总 - 自定义组件

创建自定义组件

自定义组件类似页面，需要有 js wxss wxml json 四个文件。
首先在 json 声明这是一个自定义组件：

{
    "component": true
}

代码示例：

<!-- 自定义组件内部的 wxml 结构 -->
<view class="inner">
    {{ innerText }}
</view>
<slot></slot>

/* 自定义组件内部样式 */
.inner {
    color: red
}

注意：自定义组件内部样式不能够使用 ID 选择器，属性和标签名选择器。

代码示例：

Component({
    properties: {
        // props
        innerText: {
            type: String,
            value: 'defult'
        }
    },
    data: {
        // 一些自定义组件内部状态
        someData: {}
    },
    methods: {
        // 一些自定义组件的方法
        customMethod: function () {}
    }
})

注意：自定义组件要用 Component 来注册组件。

在 Page 应用的时候需要配置 page.json 文件

{
    "usingComponents": {
        "component-tag-name": "xxx/xxx"
    }
}

然后直接在 page.wxml 引用

<view>
    <component-tag-name inner-text="some text"></component-tag-name>
</view>

组件模板和样式

slot

<!-- 组件模板 -->
<view>
    <view>这是组件内的文字</view>
    <slot></slot>
</view>

<!-- 组件引用 -->
<view>
    <component-tag-name>
        <!-- 外部插入到组件内部 -->
        <view>我是组件外部传进去的文字</view>
    </component-tag-name>
</view>

开启多个 slot 支持

Component({
    options: {
        multipleSlots: true  // 在组件内定义支持多 slot
    }
})

<view>
    <slot name="before"></slot>
    <view>略略略</view>
    <slot name="after"></slot>
</view>

<view>
    <component-tag-name>
        <!-- 这部分将插入 slot name="before" -->
        <view slot="before">我在前面</view>
        <!-- 这部分将插入 slot name="after" -->
        <view slot="after">我在后面</view>
    </component-tag-name>
</view>

知识点： :host 选择器 将对该组件所在节点的默认样式

外部样式类

Component({
    externalClasses:['my-class']
})

<component-tag-name class="my-class">这段文字的颜色由组件外的样式所决定</component-tag-name>

Component 构造器

注意：

• this.data 可以访问内部状态，但是不要直接修改他们，请使用 this.setData()
• 生命周期函数无法直接通过 this 访问到
• 属性名避免 data 开头，否则会被解析为 dataset
• 在一个组件的定义和使用时，属性和 data 互不冲突

组件间的通讯

• 父组件向子组件传递数据
• 子组件发送事件并传递数据到父组件
• 父组件调用子组件内部的方法 this.selectComponent

监听事件

当组件内部 myevent触发的时候, 调用 onMyEvent 方法。

<component-tag-name bind:myevent="onMyEvent"></component-tag-name>

触发事件

<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

Component({
    properties: {}
    methods: {
        onTap: function(){
            var myEventDetail = {} // detail对象，提供给事件监听函数
            var myEventOption = {} // 触发事件的选项
            this.triggerEvent('myevent', myEventDetail, myEventOption)
        }
    }
})

behaviors

类似于 vue 中的 mixin ,用法也一样 详见