微信小程序自定义组件封装及组件传值

首先在我们可以直接写到需要的 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"
    }
}
复制代码

转载于:https://juejin.im/post/5b84b480e51d45388c44488c