TS定义组件，想使用自定义属性怎么办?
想在组件中使用自定义属性(且该属性与视图显示无关)，使用TS方式定义就会像下面的例子（job就是期望的自定义属性）。可能会增加很多工作量，组件中定义的所有字段，方法都需要增加类型说明。这不是我期望的。因此找到了纯数据字段
{
type IData = {
name: string,
}
type IProperty = {
id: typeof Number,
}
type IMethod = {
setJob(job: string): void,
}
type ICustomInstanceProperty = {
job: string,
}
Component<IData, IProperty, IMethod, ICustomInstanceProperty>({
properties: {
id: Number,
},
data: {
name: '',
},
methods: {
setJob(job) {
this.job = job
expectType<string>(this.job)
},
},
})
}
纯数据字段
2.8.2开始支持，纯数据字段同样也是声明在data中，但需要增加一个option配置，告知编辑器，如何识别纯数据字段
import WxValidate from "@/utils/WxValidate";
import type {
WxValidateInstance,
WxValidateMessagesInfo,
WxValidateRulesInfo,
} from "@/utils/WxValidate.type";
Component({
options: {
/**
* 指定所有 _ 开头的数据字段为纯数据字段
*/
pureDataPattern: /^_/,
},
data: {
formData: {
switchChecked: false,
radio: "1",
checkbox: ["b"],
inputValue: "",
},
/**
* key为字段名
* value为错误提示信息
*/
fieldsError: {},
},
lifetimes: {
ready() {
const rulesInfo: WxValidateRulesInfo = {
checkbox: { required: true },
inputValue: { required: true },
};
const messagesInfo: WxValidateMessagesInfo = {
checkbox: {
required: "复选组件必填",
},
inputValue: { required: "文本输入组件必填" },
};
const wxValidate = new WxValidate(
rulesInfo,
messagesInfo
) as unknown as WxValidateInstance;
this.setData({
formData: {
switchChecked: false,
radio: "1",
checkbox: ["b"],
inputValue: "",
},
// 设置纯数据字段
_wxValidate: wxValidate,
});
},
},
methods: {
formSubmit(e: WechatMiniprogram.CustomEvent) {
console.log("form发生了submit事件，携带数据为：", this.data.formData);
// 获取纯数据字段
const _wxValidate = this.data._wxValidate as WxValidateInstance;
},
});
数据监听
data 数据监听(2.6.1开始支持)
properties 数据监听
- 同样可以通过 自定义组件 / 数据监听器 (qq.com) 方式监听
- 也可以使用 小程序properties属性中的observer的使用 方式监听
自定义组件中 properties 的observer | 微信开放社区 (qq.com)
如何监听properties里面的数据变化？ | 微信开放社区 (qq.com)
参考资料
Component 不能往 this 上加自定义属性 · Issue #133 · wechat-miniprogram/api-typings · GitHub
