【微信小程序】逻辑层、视图层传输数据的一点细节

以下两块代码，目的都是将对象由 JS 传输给 wxml。

假设已经在 index.js 中获取到了一个名为 object 的对象，对象的内容如下

object {
    key: value,
}

在 index.js 中

...
  data: {
  },
...
    this.setData(
    object,
    );
...

第二种形式如下：

...
  data: {
    object: {}
  },
...
    this.setData({
      object, 
    /**
    * object: object 的简写。这种简写只适用于 键值对 同名的情况。 
    * 相当于 object: object,
    */
    });
...

第一种写法相当于将 object 当成整个 data 对象。在对应的 wxml 中，引用其内容时直接引用即可：

<tag attribute="{{value}}">{{value}}</tag>

第二种写法将 object 作为一个 data 对象的属性值传入，并将这个值赋予同名属性，此时，。在对应的 wxml 中，引用其内容时需要加上 object（此时的 object 是属性名，而不是对象名，虽然它其实就是指向的对象，但是多了一步）：

<tag attribute="{{object.value}}">{{object.value}}</tag>

虽然第二种写法看似比第一种麻烦些，但是由于原先的对象，现在只是作为一个属性值被 data 对象存储（第一种方法相当于直接将原先的对象存储为 data 对象），这意味着 data 可以同时存储多个需引用的对象，再需要引入的对象变多时，这样写更简单、更灵活，且在页面中的可读性更强。