小程序template-plump

组件数据绑定

【加精】使用 this.data 可以获取内部数据和属性值，修改它们应使用 setData 

与普通的 WXML 模版类似，可以使用数据绑定，这样就可以向子组件的属性传递动态数据

<component-tag-name prop-a="{{dataFieldA}}" prop-b="{{dataFieldB}}">

组件的属性 propA 和 propB 将收到页面传递的数据 页面可以通过 setData 来改变组件的属性数据

数据绑定只能传递 JSON 兼容数基础库 

2.0.9

 后，可数据中包含函数

(但这些函数不能在 WXML 中直接调用，只能传递给子件)【怎么用？？】

-------------------------------------------------------------------------------------------------------------------------------------

Component构造器

组件的生命周期函数

created：组件命周函，在组件实例进入页面节点树时执行，此时不能调用 setData【亲测可以】

组件所在页面的生命周期

目前仅支持页面的show和hide两个生命周期

properties:

注意：[如果是两个单词就用驼峰]

在 properties 定义段中，属性名采用驼峰写法；应用于数据绑定时采用驼峰写法

在 wxml 中，指定属性值时则对应使用连字符写法

生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问

生命周期函数无法在组件方法中通过 this 访问到【亲测可以】

使用 Component 构造器构造页面

事实上，小程序的页面也可以视为自定义组件；因而，页面也可以使用 Component 构造器构造

拥有与普通组件一样的定义段与实例方法；但此时要求对应 json 文件中包含 usingComponents 定义段

此时，组件的属性可以用于接收页面的参数，如访问页面 /pages/index/index?paramA=123&paramB=xyz ，如果声明有属性 paramA 或 paramB ，则它们会被赋值为 123 或 xyz(亲测有效)

组件json里有了usingComponents字段后

1.可以独立渲染为页面，反之只能寄居在主体才能正常渲染

2.Page里的生命周期函数，此时也有了如onLoad,onReady

组件的属性名和data字段相互间都不能冲突（尽管它们位于不同的定义段中）

对于 type 为 Object 或 Array 的属性，如果通过 该组件自身的 this.setData 来改变

属性值的一个子字段，触发属性 observer

 newVal 是变化的那个子字段的值， oldVal 为空【亲测正常不为空】

------------------------------------------------------------------------------------------------------------------------------------

组件样式

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

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

3.继承样式，如 font 、 color ，组件内会从组件外继承

4.除继承样式外，（app.wxss 中的样式）（组件所在页面的样式）对自定义组件无效

5.组件可以指定它所在节点的默认样式，使用 :host 选择器

外部样式类【最好避免这种情况】

在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的

类似属性传过去↓↓↓↓

全局样式类

【亲测有bug】: 放在index.wxss||app.wxss 都不生效

当开放了全局样式类，存在外部样式污染组件样式的风险，请谨慎选择

组件wxml的slot

【亲测有bug】: (slot被渲染后的dom位置-不在-组件的预定位置；而是组件内的lastChild位置)

在组件模板中可以提供<slot> 节点，用于承载组件引用时提供的子节点