小程序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> 节点，用于承载组件引用时提供的子节点