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

首先在我们可以直接写到需要的 page 中，然后再进行抽取组件，自定义组件建议 wxzx-xxx 命名

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

例如，我们封装的组件名为 **wxzx-loadmore

• wxzx-loadmore.wxml

这里就是把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 父组件

• 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://www.cnblogs.com/luxiaoyao/p/9546607.html