小程序自定义组件属性类型几个对比说明

2023-11-13 16:47| 来源: 网络整理| 查看: 265

自定义组件类型对比

props 一微信小程序

使用的是 properties

type类型

Component({ properties: { min: { type: Number, value: 0 }, min: { type: Number, value: 0, observer: function(newVal, oldVal) { // 属性值变化时执行 } }, lastLeaf: { // 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种 type: Number, optionalTypes: [String, Object], value: 0 } } })

属性的类型可以为 String Number Boolean Object Array 其一，也可以为 null 表示不限制类型。

变相使用 Function类型的

组件js 属性

/** * 组件的属性列表 */ properties: { show:{ //是否弹出 type:Boolean, value:false }, fundata:{ type:Function } },

页面使用

data: { ageCurrentNumber:30, tempData:0, price:null, leftTest:'左边demo', rightTest:'右边demo', show:false, zujiandata:'', testNum:function(e){ console.log(getCurrentPages()[0],"data"); // getCurrentPages()[0].data.zujiandata=e; getCurrentPages()[0].aaaaShow(e); console.log(e) } }, aaaaShow(data){ //传值 this.setData({ zujiandata:data }) }, 8888 这是来自组件的数据{{zujiandata}}

www.cnblogs.com/xiaohuasan/…

二抖音小程序

使用的是 properties

type类型

Component({ behaviors: [], properties: { myProperty: { // 类型（必填），目前可使用的类型包括：String, Number, Boolean, Object, Array，Function, null（表示 any 类型） type: String, // 属性的默认值 (可选), 如果没有特别指定，会根据类型指定一个默认值 value: '', // 当属性改变时执行的函数（可选），方法名称也可以是字符串，如：'_myPropertyChange' observer(newVal, oldVal) { // newVal 是属性更新后的新值，oldVal 是更新前的旧值 } }, myPropertyB: String // 简易写法 }, // 私有数据，可用于视图渲染 data: {}, // 生命周期方法 attached() { this.selectComponent('.class-name', (res) => { console.log(res) }) }, ready() { }, lifetimes: { // lifetimes 中定义的生命周期方法优先级更高 attached() {}, // .... }, // 组件的自定义方法 methods: { onMyButtonTap() { this.setData({ ... }) }, _myPrivateMethod() { // 将 data.A[0].B 更新为 'test' this.setData({ 'A[0].B': 'test' }) }, _myPropertyChange(newVal, oldVal) { } } })

属性类型 // 类型（必填），目前可使用的类型包括：String, Number, Boolean, Object, Array，Function, null（表示 any 类型）

注意：这样的数据绑定只能传递 JSON 兼容数据。自基础库版本 2.46.0 开始，还可以在数据中包含函数，如果需要通过属性传递函数，需要在 app.json 中配置"component2": true，并将属性类型声明为 Function。

{ "component2": true } Component({ properties: { funcProp: Function, }, }); 三支付宝小程序

使用的是 props

与vue比较类似

type类型和vue差不多一样

props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor } 四 vue

使用的是 props

type类型有

props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }

使用实例

www.cnblogs.com/xiaohuasan/…

【本文地址】

公司简介

联系我们