## Component构造器 [TOC] ### 定义段与示例方法 Component构造器可用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等。  ### 组件的生命周期  created 组件实例化，但节点树还未导入，因此这时不能用setData attached 节点树完成，可以用setData渲染节点，但无法操作节点 ready(不是onReady) 组件布局完成，这时可以获取节点信息，也可以操作节点 moved 组件实例被移动到树的另一个位置 detached 组件实例从节点树中移除   ### component 的使用 更多关于[component](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html) #### component使用模板目录 1.创建components目录 2.在其中添加任意名字目录（success） 3.在该目录下新建任意名字的component（index）  #### 例  ##### success>index.wxml ``` <icon type="{{type?'success':'cancel'}}" size="23" color="#abcdef" bindtap="handleClick"></icon> <text>{{param}}</text> ``` ***** ##### success>index.js ``` Component({ properties: { src: { type: Boolean }， param:{ type:String } }, data: { }, methods: { //1. handleClick() { var type = this.data.type; this.setData({ type:!type }) console.log(this.data); } } }) ``` 点击icon执行函数，同时`console.log(this.data)`打印出数据如下  ***** ##### success>index.json ``` { "component": true, "usingComponents": {} } ``` ***** ***** ##### index>index.json 定义component组件的标签名和文件地址 ``` { "usingComponents":{ "v-success":"/components/success/index" } } ``` ***** ##### index>index.wxml >param为自定义传参 ``` <v-success param="{{child}}"></v-success> ``` ***** ##### index>index.js >定义参数child的内容 ``` Page({ data:{ child:"child" } }) ``` ***** ### component 的使用 更多关于[component](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html) #### component使用模板目录 1.创建components目录 2.在其中添加任意名字目录（success） 3.在该目录下新建任意名字的component（index）  #### 例  ##### success>index.wxml ``` <icon type="{{type?'success':'cancel'}}" size="23" color="#abcdef" bindtap="handleClick"></icon> <text>{{param}}</text> ``` ***** ##### success>index.js ``` Component({ properties: { src: { type: Boolean }， param:{ type:String } }, data: { }, methods: { //1. handleClick() { var type = this.data.type; this.setData({ type:!type }) console.log(this.data); } } }) ``` 点击icon执行函数，同时`console.log(this.data)`打印出数据如下  ***** ##### success>index.json ``` { "component": true, "usingComponents": {} } ``` ***** ***** ##### index>index.json 定义component组件的标签名和文件地址 ``` { "usingComponents":{ "v-success":"/components/success/index" } } ``` ***** ##### index>index.wxml >param为自定义传参 ``` <v-success param="{{child}}"></v-success> ``` ***** ##### index>index.js >定义参数child的内容 ``` Page({ data:{ child:"child" } }) ``` *****