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

自定义组件类型对比

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
    })
    },

  <demo-dialog show="{{show}}" bindonclose="testclose" fundata="{{testNum}}">
     <view>8888</view>
     
  </demo-dialog>
 <view>这是来自组件的数据{{zujiandata}}</view>

www.cnblogs.com/xiaohuasan/…

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/…