收藏
评论

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

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

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



最后一次编辑于  2018-08-28
赞 1
收藏