微信小程序：自定义组件的数据传递

摘要：引入组件假如我要在里引入组件想在页面中使用组件必须在文件里注册组件。组件的属性列表组件的方法列表组件内数据传到外部在这个组件内我定义了这个方法，每次点击一级菜单或二级菜单的时候我就用过方法把的值传到组件外部以供使用。

如果小程序中有可复用的UI且具有一定的功能性，就可以使用自定义组件将其封装起来。（如果仅仅只需要复用UI可使用template）

下面介绍父子组件的数据传递方法，以及一个简单的组件和一个复杂的组件示例。

【由于刚开始写这篇文章的时候我还算是一个小程序的新手，自己看着官方文档研究并整理归纳的，有很多不足以及错误的地方。在经过一年的沉淀以后（虽然这一年我主要在写vue而不是小程序），我决定重新整理这篇浏览量比较大的文章，以免新手因我的文章走了弯路。】

parent.wxml

parent.js

data: {
  name: "Peggy",
  age: 25
}

child.js

properties: {
  name: {
    type: String,
    value: "小明"
  },
  age: Number
}

父组件向子组件传值以属性的形式，子组件以properties接收，并可指定数据类型type以及默认值value。
在wxml里可直接以{{name}}的形式使用，而在js中以this.properties.name获取。

child.js

methods: {
  changeName() {
    this.triggerEvent("changeName", {
      name: "李四"
    })
  }
}

parent.wxml

parent.js

changeName(event) {
  console.log(event.detail)

  // { name: "李四" }
}

子组件向父组件传递数据使用this.triggerEvent方法，这个方法接受3个参数：
this.triggerEvent("myevent", myEventDetail, myEventOption);

myevent为方法名，
myEventDetail是传到组件外的数据，
myEventOption为是否冒泡的选项，有三个参数可以设置：

bubbles    默认false 事件是否冒泡
composed 默认false 事件是否可以穿越组件边界
capturePhase 默认false 事件是否拥有捕获阶段

在父组件监听事件bindchangeName="changeName"，在changeName方法里有一个event参数，可以从event.detail里拿到组件内部传出来的值。

这个组件常见于外卖软件中，用于记录想要购买的商品的数量。初始化的时候只有一个加号，点击加号以后出现数字和减号，并最后将数字传到组件外供外部使用。

首先在根目录创建components文件夹（推荐），然后创建num-controller文件夹（我取的组件名字），在这个文件夹上点击右键新建一个component，名字为index。

/components/num-controller/index.wxml

  
  {{num}}
  

这段代码就是加减两个按钮和一个数字。

/components/num-controller/index.json

{
  "component": true,
  "usingComponents": {}
}

这个文件在创建component的时候会自动写入这段代码。

/components/num-controller/index.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    nameId: {
      type: String
    },
    num: {
      type: Number,
      value: 0
    },
    int: {
      type: Number,
      value: 1
    },
    min: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    numChange() {
      this.triggerEvent("numChange", {
        num: this.properties.num,
        nameId: this.properties.nameId
      })
    },
    add() {
      this.setData({
        num: this.properties.num + this.properties.int
      })
      this.numChange()
    },
    sub() {
      this.setData({
        num: this.properties.num - this.properties.int
      })
      this.numChange()
    }
  }
})

在组件内部我定义了4个属性，properties是父组件传给子组件的属性。
nameId用来标识子组件的唯一性，如果在父组件内有多个计数器，子组件想把改变的数据传给父组件时可以用到；
num代表计数器中的数字，默认为0；
int代表加减一次改变多少，默认为1；
min代表计数器的最小值，等于这个值时减号会消失，默认为0。

同时在子组件内定义了两个方法：
add点击加号触发，首先改变子组件内部的数字，同时触发numChange方法将改变的数字传到组件外部；
sub点击减号触发，首先改变子组件内部的数字，同时触发numChange方法将改变的数字传到组件外部。

假如我要在index.wxml里引入组件：

index.json

{
  "usingComponents": {
    "num-controller": "/components/num-controller/num-controller"
  }
}

想在页面中使用组件必须在json文件里注册组件。

index.js

Page({
  data: {
    num1: 0,
    num2: 10,
    num3: 100
  },
  numChange(event) {
    const {num, nameId} = event.detail
    this.setData({
      [nameId]: num
    })
  }
})

data里的num1, num2, num3是从组件外传入的num，在numChange方法里用event.detail可以拿到组件内部通过this.triggerEvent传出来的数据，然后根据业务需求做逻辑修改。

这是一个二级菜单，点击左边（一级）会改变右边（二级）的展示。

组件内部：
/components/filter-panel/index.wxml

  
    
      ...
    

    
      ...
    
  

/components/filter-panel/index.json

{
  "component": true,
  "usingComponents": {}
}

组件外部：
假如我要在index.wxml里引入组件：

index.json

{
  "usingComponents": {
    "filter-panel": "/components/filter-panel/index"
  }
}

这样就成功引入组件啦~（说真的组件化做好了非常舒服，后期会省很多力气）

组件外部：

index.wxml

index.js

data: {
  list: [
    ["附近", "地铁站"],
    [["不限", "1km", "2km", "3km"], ["江汉路", "积玉桥", "洪山广场", "楚河汉街", "光谷广场"]]
  ],
  active: [0, 0]
},

组件内部：

/components/filter-panel/index.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    list: Array,
    active: Array
  },
  /**
   * 组件的方法列表
   */
  methods: {
    ...
  }
})

如果想从组件外向组件内传递数据，直接在外部引用时以属性的方式传入。
这里我传入了2个属性：
list是二级选择面板渲染的数据。
active是用户选择的选项数据。

到这里组件已经可以正常展示了，但是点击显示选中项还未实现。

控制组件active项的是外部的数据active: [0, 0]，通过组件以属性的形式传到了内部。

/components/filter-panel/index.wxml

  
    
      

        

          {{item}}
        
      
    

    
      

        

          {{item}}
        
      
    
  

/components/filter-panel/index.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    list: Array,
    active: Array
  },
  /**
   * 组件的方法列表
   */
  methods: {
    changeLevel() {
      this.triggerEvent("changeLevel", {
        level1: this.properties.active[0],
        level2: this.properties.active[1]
      })
    },
    changeLevel1(event) {
      const index = event.target.dataset.index
      this.setData({
        active: [index, 0]
      })
      this.changeLevel()
    },
    changeLevel2(event) {
      const level2 = "active[1]"
      const index = event.target.dataset.index
      this.setData({
        [level2]: index
      })
      this.changeLevel()
    }
  }
})

在这个组件内我定义了changeLevel这个方法，每次点击一级菜单或二级菜单的时候我就用过this.triggerEvent方法把active的值传到组件外部以供使用。

/components/filter-panel/index.js

methods: {
  changeLevel() {
    this.triggerEvent("changeLevel", {
      level1: this.properties.active[0],
      level2: this.properties.active[1]
    })
  },
  changeLevel1(event) {
    const index = event.target.dataset.index
    this.setData({
      active: [index, 0]
    })
    this.changeLevel()
  },
  changeLevel2(event) {
    const level2 = "active[1]"
    const index = event.target.dataset.index
    this.setData({
      [level2]: index
    })
    this.changeLevel()
  }
}

这个项目里倒是没用用到组件间的数据传递，所以只是组件和外部的传递，还算是比较简单，但是一定要思考清楚数据的变化状态。