小程序自定义组件 - 数据方法与属性
这块在组件中的定义和使用, 同 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
})
},
这俩一样的,就都行吧, 喜欢用啥就用啥吧.
