一、
组件定义
类似于页面，一个自定义组件是由四个文件组成的。
.wxml、.json、.js、.wxcc
首先需要在组件的json中进行自定义组件声明。
{
"component": true
}
二、使用组件
要求对应 json 文件中包含
usingComponents
定义段
{
"usingComponents": {
"son":"/components/son/son"
}
}
三、设置插槽、命名插槽<slot>
// 使用的时候// 父组件
<son> <view slot="名字"> </view> </son>
// 子组件中
<slot name="名字"></slot>
四、
组件中的样式
组件对应
wxss
文件的样式，只对组件
wxml
内的节点生效。编写组件样式时，需要注意以下几点：
组件和引用组件的页面不能使用
id
选择器（
#a
）、属性选择器（
[a]
）和标签名选择器，请改用
class
选择器。
组件和引用组件的页面中使用后代选择器（
.a .b
）在一些极端情况下会有非预期的表现，如遇，请避免使用。
子元素选择器（
.a>.b
）只能用于
view
组件与其子节点之间，用于其他组件可能导致非预期的情况。
继承样式，如
font
、
color
，会从组件外继承到组件内。
除继承样式外，
app.wxss
中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。
五、
父子组件传值
1、父组件给子组件传值
在子组件中定义属性，父组件在引用子组件的时候通过设置属性的方式给子组件传值
properties: {
// 复杂定义
name:{
type: String,
value:'张三丰'
},
// 简单定义
name2:String
2、子组件给父组件传值
在父页面中使用的子组件标签上绑定一个自定义事件
<test-button name="张无忌" bind自定义事件="事件名"></test-button>
在子组件中触发这个事件，可以给父组件传值。
子组件中通过
triggerEvent
触发事件
methods: {
方法名字: function(){
// 触发事件的选项
this.triggerEvent('自定义事件类型', 子组件要传给父组件的值)
} }父组件中拿到传过来的值使用自定义事件就欧克。参数就是子组件传来的参数。
六、组件的生命周期
重要的生命周期是
created
、
attached、
detached
-
组件实例刚刚被创建好时，
created
生命周期被触发。此时，组件数据
this.data
就是在
Component
构造器中定义的数据
data
。
此时还不能调用
setData
。
通常情况下，这个生命周期只应该用于给组件
this
添加一些自定义属性字段。 -
在组件完全初始化完毕、进入页面节点树后，
attached
生命周期被触发。此时，
this.data
已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。 -
在组件离开页面节点树后，
detached
生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则
detached
会被触发。