小程序自定义组件 - 数据方法与属性

这块在组件中的定义和使用, 同 vue 是大致相同的. 在小程序组件中定义在 .js 的 Component ( ) 中即可.

data 和 methods

小程序中, 组件数据要定义在 data 中, 而事件处理函数和自定义方法都定义在 methods 中. 以一个页面点击 + 1 的例子作为演示: (还是之前的 cj 组件)

组件结构部分:

<!--components/cj/cj.wxml-->

<button bindtap="addCount">+1</button>

组件逻辑部分:

// components/cj/cj.js
Component({
  data: {
    count: 0
  },
  methods: {
    // 点击事件处理函数
    addCount() {
      this.setData({
        count: this.data.count + 1
      })

      this._showCount()
    },
    // 自定义方法
    _showCount() {
      wx.showToast({
        title: "count 是: " + this.data.count 
      })
    }
  }
})

这样当在页面的 "+1" 按钮点击时, 触发 tap 事件所对应的 addCount 函数, 在组件 .js 的 methods 节点中, 该函数将通过 this.data.count 获取到了组件 data 中的 count 值, 并将其自增1后, 通过 this.setData({ }) 函数重新给 count 进行赋值;

然后再调用下面自定义的 _showCount( ) 方法, 它的作用就简单将 count 的值给显示出来. 就这整个过程, 我可以说完全是抄袭 vue 的, 不过也挺好, 学一边都会了哈哈哈.

properties 属性

在小程序组件中, properties 是组件的对外属性, 用来接收外界传递到组件中的数据. 就类似于 vue 中的 prop, 父组件通过 v-bind:name="value" 给子组件传值, 子组件通过 props: ['name'] 进行接收. 但在小程序中则更简单和便于理解一些.

参照上例, 假设我们要通过在 index 主页面中, 通过 prop 的方式给 cj 组件传递一个名为 max 的数值型属性, 使其自增到 max 后, 就不能再继续了.

组件结构部分:

<!--components/cj/cj.wxml-->

<!-- 假设增加到 max = 10 就停止 -->
<button max=10 bindtap="addCount">+1</button>

组件逻辑部分:

// components/cj/cj.js
Component({

  properties: {
    max: {
      type: Number,
      value: 10
    }
  },

  data: {
    count: 0
  },

  methods: {
    // 点击事件处理函数
    addCount() {

      // 判断外界通过属性传递过来的 max 的值
      if (this.data.count >= this.properties.max) return 

      this.setData({
        count: this.data.count + 1
      })

      this._showCount()
    },
    // 自定义方法
    _showCount() {
      wx.showToast({
        title: "count 是: " + this.data.count 
      })
    }
  }
})

data 和 properties 的区别

在 vue 中, data 是组件的私有数据, prop 是外部传递给组件的数据. data 可读可写, prop 只能读 (单项数据流).

而在小程序中, data 和 properties 都是可读可写的, 就有点狗了. 但实际效果却和 vue 一样的. 建议 data 存私有数据, 而 properties 存储外界传进来的数据. 我想说, 你要抄作业就全抄不好嘛, 笑死.

接上例来演示通过这两种方式 传递的是数据, 其实是一样的.

组件结构部分:

<!--components/cj/cj.wxml-->

<button max="10" bindtap="addCount">+1</button>
<button bindtap="showInfo">showInfo</button>

组件逻辑部分:

// components/cj/cj.js
Component({

  properties: {
    max: {
      type: Number,
      value: 10
    }
  },

  data: {
    count: 0
  },

  methods: {
    // 点击事件处理函数
    addCount() {

      // 判断外界通过属性传递过来的 max 的值
      if (this.data.count >= this.properties.max) return 

      this.setData({
        count: this.data.count + 1
      })

      this._showCount()
    },
    // 自定义方法
    _showCount() {
      wx.showToast({
        title: "count 是: " + this.data.count 
      })
    },
    // 验证一下
    showInfo() {
      console.log(this.properties)
      console.log(this.data)
      console.log('它们全等嘛: ', this.properties === this.data)
    }
  }
})

然后我点击了两下, 控制台显示如下:

{count:2, max:10}
{count:2, max:10}
它们全等嘛:  true

由此可看出 data 数据 和 properties 属性 在本质上没有任何区别, 即 properties 的值也能用于页面的渲染, 或者使用 setData( ) 给 properties 进行重新赋值哦.

<view>max 属性的当前值是: {{max}}</view>

methods: {
// 点击事件处理函数
addCount() {
    this.setData({
      // 属性 和 数据 都能被修改, 这操作有病...
      count: this.data.count + 1,
      max: this.properties.max +1
})

},

这俩一样的,就都行吧, 喜欢用啥就用啥吧.