微信小程序的组件

引用自定义组件

组件名	组件json->	页面json->	页面wxml
mycomp.js/.json/.wxml/.css	{"component": true,usingComponents": {}}	{"usingComponents": {"mycomp": "../../components/mycomp/mycomp"}}	<mycomp></mycomp>

组件展现页面的数据和自身的数据

没有区分. 如

`Component({
  properties: {propFromPage: 1},
  data: {propFromData: 2}
})

在组件wxml中都是同样方式引用{{propFromPage}} {{propFromData}}. 但在组件js中引用方式有区分:this.properties.propFromPage, this.data.propFromData

调用函数

组件中的函数引用方式在js中不需要加methods, 如

`Component({
  properties:{prop:{type: Number, value:1, observer(newValue, oldValue){this.f1();}}},
  lifetimes:{attached(){this.f1();}},
  methods: {
    f1(){},
    f2(){this.f1()},
  }
})

页面向组件传数据

页面js->	页面wxml->	页面wxml	组件js
Page({data:{pageprop: 1}})	<mycomp prop="{{pageprop}}"></mycomp>	{{prop}}	Component({ properties: {prop: 默认值}, methods:{f(){this.properties.prop },}})

组件向页面传数据(通过事件)

组件js->	页面wxml->	页面js
Component({method:{f(){this.triggerEvent('someevent', somevalue) },}})	<mycomp bind:someevent="processIt"></mycomp>	processIt(e){let value = e.detail}