微信小程式自定義元件封裝及元件傳值

清風白水發表於2018-08-28
微信小程式元件封裝

首先在我們可以直接寫到需要的 page 中，然後再進行抽取元件，自定義元件建議 wxzx-xxx 命名

官網地址：developers.weixin.qq.com/miniprogram…

例如，我們封裝的元件名為 **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"
    }
}
複製程式碼

相關文章