微信小程序自定義組件封裝及父子間組件傳值

首先在咱們能夠直接寫到須要的 page 中，而後再進行抽取組件，自定義組件建議 wxzx-xxx 命名

官網地址：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

例如，咱們封裝的組件名爲 **wxzx-loadmore

• wxzx-loadmore.wxml

<view hidden="{{response.length < 1}}">
    <view class="weui-loadmore" hidden="{{is_loadmore}}">
        <view class="weui-loading"></view>
        <view class="weui-loadmore__tips">正在加載</view>
    </view>
    <view class="weui-loadmore weui-loadmore_line" hidden="{{!is_loadmore}}">
        <text class="weui-loadmore__tips">{{tip}}</text>
    </view>
</view>

這裏就是把index.wxml中的須要封裝成組件的代碼原樣copy過來

• wxzx-loadmore.js

Component({
    /**
     * 組件的屬性列表
     */
    properties: {
        response: {
            type: String,
            value: ''
        },
        is_loadmore: {
            type: Boolean,
            value: false
        },
        tip: {
            type: String,
            value: '我是有底線的'
        }
    },

    /**
     * 組件的初始數據
     */
    data: {

    },

    /**
     * 組件的方法列表
     */
    methods: {
		 emit: function(data) {
            // 自定義組件向父組件傳值 
            let val = data,
                my_event_detail = {
                    val: val
                }
            // myevent自定義名稱事件，父組件中使用
            this.triggerEvent('myevent', my_event_detail)
             /*
             	在父組件中寫上bind:myevent="get_emit",在父組件中就須要調用get_emit事件
             */
        },
    }
})

• index.wxml 父組件

<wxzx-loadmore 
        response="{{comment_list}}"
        is_loadmore="{{is_loadmore}}"
        bind:myevent="get_emit"
        ></wxzx-loadmore>
<!-- 這就是在父組件中調用子組件，而後基於子組件傳值來在父組件中賦值 -->

• index.js 中

// 接受子組件的傳值
    get_emit: function (e) {
        this.setData({
            is_show: e.detail.val
        })
    },

• index.json 這裏須要引入組件，在哪一個父頁面中引用子組件，就在哪一個json文件中引入

{
    "usingComponents": {
        "wxzx-loadmore": "/component/wxzx-loadmore/wxzx-loadmore"
    }
}