微信小程序的自定义组件

一、组件定义

类似于页面，一个自定义组件是由四个文件组成的。

.wxml、.json、.js、.wxcc

首先需要在组件的json中进行自定义组件声明。

{
  "component": true
}

二、使用组件

要求对应 json 文件中包含 usingComponents 定义段

{
  "usingComponents": {
       "son":"/components/son/son"
}
}

三、设置插槽、命名插槽

// 使用的时候// 父组件
   
// 子组件中

四、组件中的样式

组件对应 wxss 文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点：

组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。

组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。

子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。

继承样式，如 font 、 color ，会从组件外继承到组件内。

除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。

五、父子组件传值

1、父组件给子组件传值

 在子组件中定义属性，父组件在引用子组件的时候通过设置属性的方式给子组件传值

properties: {    
// 复杂定义    
name:{      
type: String,      
value:'张三丰'    
},    
// 简单定义    
name2:String

2、子组件给父组件传值

在父页面中使用的子组件标签上绑定一个自定义事件

在子组件中触发这个事件，可以给父组件传值。

子组件中通过triggerEvent触发事件

methods: {    
方法名字: function(){

// 触发事件的选项      
this.triggerEvent('自定义事件类型', 子组件要传给父组件的值)    

}  }

父组件中拿到传过来的值使用自定义事件就欧克。参数就是子组件传来的参数。

六、组件的生命周期

重要的生命周期是 created 、attached、 detached

• 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
• 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
• 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。