标签:mount 改变 参数详解 def options ini option 数据导出 code
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) } } })
标签:mount 改变 参数详解 def options ini option 数据导出 code
原文地址:https://www.cnblogs.com/zxuedong/p/12910939.html