微信小程序 – 组件用法

组件的 wxml

<!-- footer.wxml -->
<view class="common_footer_cover"></view>
<view class="common_footer">
    <button class="customer_service" open-type="contact" bindcontact="handleContact">
        <view>联系客服</view>
    </button>
    <view class="next" catchtap="_next">{{title}}</view>
</view>

组件的 js

// footer.js
Component({
    options: {
        multipleSlots: true,
    },
    properties: {
        title: {
            type: String,
            value: '标题'
        }
    },
    data: {
    },
    methods: {
        _next: function (event) {
            this.triggerEvent('next')
        }
    }
})

组件的 json

{
    "component": true
}

父页面的 wxml 添加

<footer title="立即咨询" bind:next="next"></footer>

父页面的 js 添加事件

next: function () {
    console.log('aaaaa')
},

父页面的 json

{
    "usingComponents": {"footer": "../../common/footer/footer"}
}