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

版权声明:本文为luxiaoyao原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/luxiaoyao/p/9546607.html