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

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

    }

}

巴特西

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

最新文章

热门文章