Component配置参数详解

Posted 2021-02-18 zxuedong

Component配置参数详解

 

 

1.常用配置

Component({

    // 相当于vue的mxins把公共模块导出去

    behaviors: [],

    // 组件的其他配置

    options: {},

    // 扩展自定义组件

    definitionFilter: {},

    // 初始化数据

    data: {},

    // 接受父组件的参数

    properties: {},

    // 推荐在lifetimes里面定义组件生命周期函数

    lifetimes: {},

    // 定义组件的自定义方法

    methods: {},

    // 定义组件所在页面的生命周期函数

    pageLifetimes: {},

    // 定义对外使用的class类

    externalClasses: [],

    // 监视器，监视数据的变化

    observers: {}

})

 

2.组件的生命周期函数

 

Component({

    lifetimes: {

        // 在组件实例刚刚被创建时执行，注意setData不能被调用，所以不适合用来获取数据

        created () {

            console.log(‘实例刚刚被创建完毕‘)
        },
        
        // 在组件实例进入页面节点树时执行，可以用来获取数据

        attached () {

            console.log(‘页面渲染之前调用‘)
        },

        // 页面初次渲染完毕调用

        ready () {

            console.log(‘页面初次渲染完毕调用‘)
        },

        // 组件Dom发生改变调用

        moved () {

            console.log(‘组件Dom发生改变调用‘)
        },

        // 在组件实例被从页面节点树移除时执行

        detached () {

            console.log(‘页面卸载调用‘)
        },

        // 组件方法抛出错误执行

        error () {

            console.log(‘组件方法发送错误‘)
        }
    }
})

 

 

3.组件所在页面的生命周期

 

// 组件所在页面的生命周期

Component({

    pageLifetimes: {

        show () {

          console.log(‘组件切入前台显示‘)
        },

        hide () {

          console.log(‘组件切入后台隐藏‘)
        },

        resize () {

          console.log(‘组件所在的页面尺寸变化时执行‘)
        }
    }
})

 

 

4.监听器的使用

 

// 监听数据的变化，可以监视 setData改变数据就会触发监视器

Component({

    data: {

        count: 0,

        name: ‘小美‘
    },

    observers: {

        count (val) {

            console.log(val)
        },

        // 可以监视多个数据

        "count, name" (val1, val2) {

            console.log(val1, val2)
         }
    },

    methods: {

        fn () {

            // 修改count的值，触发数据监视器

            this.setData({

                count: 1
            })
        }
    }
})

 

 

5.公共方法或者数据导出

// 在utils目录下新建behaviors.js

export const classicBeh = Behavior({

  data: {
    msg: ‘我是公共数据‘
  },

  methods: {
    val () {
      this.setData({
        msg: ‘小美‘
      })
    }
  },

  created () {

  },

  mounted () {
   
  }

})



// 在需要用到的组件或者页面组件中使用


// 引入公共数据

import { classicBeh } from ‘../../utils/behaviors‘

Component({

    behaviors: [classicBeh],

    lifetimes: {

        created () {

            // 可以拿到公共混入的数据

            console.log(this.data.msg)
        }
    }
})