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