微信小程序---组件开发与使用

一、前言

        最近项目上需要用到抽离的组件来实现一些功能。现在将组件使用过程中的遇到的一些问题进行分享。

二、父页面引用子组件及使用

       1、引用

         在父页面的.json文件中，添加上组件。如下代码所示，“usingComponents”的值是一个对象，里面添加子组件。其中冒号前面的为子组件的名字（用在父页面中，可自定义），冒号后面的是子组件的路径。

{
  "usingComponents": { 
    "rylist":"../../../components/zylist/zylist",
    "inputContent":"../../../components/inputContent/inputContent",
    "tips":"../../../components/tips/tips"
   },
  "navigationBarTitleText": "住院记录"
}

        2、使用

        在父页面的.wxml文件中直接使用定义的组件名称，即可完成组件的使用

<inputContent></inputContent>

三、父页面给子组件传参

        1、传参       

        如果是父页面给子组件传参，那么仅需要在子组件所在的标签上添加上需要传递的名字及值即可。如下述代码所示，userinfo即为要传递的参数名，{ {userinfo}}为参数值

  <inputContent id="inputContent" userinfo="{
   {userinfo}}"></inputContent>

        2、接收参数

        子组件在properties属性列表中，接收父页面传递的参数。该值是一个对象类型，可以指定数据类型及默认值及其他，这里就不一一举例。

 /**
   * 组件的属性列表
   */
  properties: {
    userinfo: {
      type: Object,
      value: null
    }
  },

        子组件在其所在的wxml文件中直接使用该值即可。（就跟正常页面使用data中对象类型的值一样的使用方式）

四、子组件给父页面传参

        子组件可以通过调用父页面方法的方式给父页面传参。

父页面代码：

<inputContent id="inputContent" bind:addUser="addUser" bind:cancle="cancle"></inputContent>

子组件代码：

var user = {
            xm: xm,
            sfzhm: sfzhm,
            openid: app.globalData.openID,
          }
this.triggerEvent("addUser", JSON.stringify(user))

        子组件使用this.triggerEvent("方法名","参数')触发父页面中的方法，并传参参数；

        父页面使用bind:方法名="父页面中的方法名"的方式进行接收。

父页面中的方法会有一个形参，比如e，用来接收从子组件传递的参数。如下代码：

  //新增用户点击按钮
  addUser: function (e) {
    var that = this;
    if (e != undefined) {
      var type = e.type;
      //当从子组件传值
      if (type == "addUser") {
        var userInfo = e.detail;
        //新增用户信息
        Util.addZyUser(userInfo)
      }
    }
    that.setData({
      showPopup: !that.data.showPopup
    })
  },

五、其他

        ① 如果需要做弹窗效果，可以通过wx:if=”{ {show}}“的方法来控制显隐。

        ② 后续补充……