微信小程序之组件

组件类别

自定义组件和官方组件

封装的作用

为了可以方便反复使用

组件js结构与pagejs文件的区别

组件小案例

注册组件：

使用组件：

properties 定义

定义段	类型	描述	最低版本
type	是	属性的类型
optionalTypes Array	否	属性的类型（可以指定多个）	2.6.5
value	否	属性的初始值
observer Function	否	属性值变化时的回调函数

案例

Component({
  properties: {
    min: {
      type: Number,
      value: 0
    },
    min: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
      }
    },
    lastLeaf: {
      // 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种
      type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})

详情

Component

Component像页面一样由wxml、wxss、js和json4个文件组成，且需要把这4个文件放在同一个目录中。与页面不一样的是，Component中的构造函数（也可以称构造器）是Component({})，而页面中的构造函数是Page({})。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将component字段设为true可这一组文件设为自定义组件）：

{
  "component": true
}

组件样式编写注意事项

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

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

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

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

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

组件与数据通信

组件间的通信方法有以下几种：

WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。

事件：用于子组件向父组件传递数据，可以传递任意数据。
如果以上两种方式不足以满足需要，父组件还可以通过this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

通过在页面中给组件加了一个id值，这样子我们就能查到组件的方法了。

<compontent id="modal"></compontent>

/*js*/
var modal = this.setlectComponet('#modal');

这样子就能在外面调用组件里面的任意数据和方法了。

properties：主页面传入数据到组件，相当于vue的props，是传入外部数据的入口。

data：则用于组件的内部数据变化，外部数据没法初始化