组件

原生小程序支持js模块化，但彼此独立，业务代码与交互事件仍需在页面处理。无法实现组件化的松耦合与复用的效果。

例如模板A中绑定一个bindtap="myclick"，模板B中同样绑定一样bindtap="myclick"，那么就会影响同一个页面事件。对于数据同样如此。因此，只有通过改变变量或者事件方法，或者给其加不同前缀才能实现绑定不同事件或者不同数据。当页面复杂之后就十分不利于开发维护。

因此，在WePY中实现了小程序的组件化开发，组件的所有业务与功能在组件本身实现，组件与组件之间彼此隔离，上述例子在WePY的组件化开发过程中，A组件只会影响到A所绑定的myclick，B也如此。

WePY编译组件的过程如下：


组件 - 图1

普通组件引用

当页面需要引入组件或组件需要引入子组件时，必须在.wpy文件的<script>脚本部分先import组件文件，然后在components对象中给组件声明唯一的组件ID，接着在<template>模板部分中添加以components对象中所声明的组件ID进行命名的自定义标签以插入组件。如：

  1. /**
  2. project
  3. └── src
  4.     ├── components
  5.     |   └── child.wpy
  6.     ├── pages
  7.     |   ├── index.wpy    index 页面配置、结构、样式、逻辑
  8.     |   └── log.wpy      log 页面配置、结构、样式、逻辑
  9.     └──app.wpy           小程序配置项（全局公共配置、公共样式、声明钩子等）
  10. **/
  12. // index.wpy
  14. <template>
  15.     <!-- 以`<script>`脚本部分中所声明的组件ID为名命名自定义标签，从而在`<template>`模板部分中插入组件 -->
  16.     <child></child>
  17. </template>
  19. <script>
  20.     import wepy from 'wepy';
  21.     //引入组件文件
  22.     import Child from '../components/child';
  24.     export default class Index extends wepy.component {
  25.         //声明组件，分配组件id为child
  26.         components = {
  27.             child: Child
  28.         };
  29.     }
  30. </script>

需要注意的是，WePY中的组件都是静态组件，是以组件ID作为唯一标识的，每一个ID都对应一个组件实例，当页面引入两个相同ID的组件时，这两个组件共用同一个实例与数据，当其中一个组件数据变化时，另外一个也会一起变化。

如果需要避免这个问题，则需要分配多个组件ID和实例。代码如下：

  1. <template>
  2.     <view class="child1">
  3.         <child></child>
  4.     </view>
  6.     <view class="child2">
  7.         <anotherchild></anotherchild>
  8.     </view>
  9. </template>
  12. <script>
  13.     import wepy from 'wepy';
  14.     import Child from '../components/child';
  16.     export default class Index extends wepy.component {
  17.         components = {
  18.             //为两个相同组件的不同实例分配不同的组件ID，从而避免数据同步变化的问题
  19.             child: Child,
  20.             anotherchild: Child
  21.         };
  22.     }
  23. </script>

注意：WePY中，在父组件template模板部分插入驼峰式命名的子组件标签时，不能将驼峰式命名转换成短横杆式命名(比如将childCom转换成child-com)，这与Vue中的习惯是不一致。

组件的循环渲染

1.4.6新增

当需要循环渲染WePY组件时(类似于通过wx:for循环渲染原生的wxml标签)，必须使用WePY定义的辅助标签<repeat>，代码如下：

  1. /**
  2. project
  3. └── src
  4.     ├── components
  5.     |   └── child.wpy
  6.     ├── pages
  7.     |   ├── index.wpy    index 页面配置、结构、样式、逻辑
  8.     |   └── log.wpy      log 页面配置、结构、样式、逻辑
  9.     └──app.wpy           小程序配置项（全局样式配置、声明钩子等）
  10. **/
  12. // index.wpy
  14. <template>
  15.     <!-- 注意，使用for属性，而不是使用wx:for属性 -->
  16.     <repeat for="{{list}}" key="index" index="index" item="item">
  17.         <!-- 插入<script>脚本部分所声明的child组件，同时传入item -->
  18.         <child :item="item"></child>
  19.     </repeat>
  20. </template>
  22. <script>
  23.     import wepy from 'wepy';
  24.     // 引入child组件文件
  25.     import Child from '../components/child';
  27.     export default class Index extends wepy.component {
  28.         components = {
  29.             // 声明页面中要使用到的Child组件的ID为child
  30.             child: Child
  31.         }
  33.         data = {
  34.             list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}]
  35.         }
  36.     }
  37. </script>

页面可以引入组件，而组件还可以引入子组件。一个页面引入若干组件后，组件结构如下图：


组件 - 图2

如上图所示，Page_Index页面引入了ComA、ComB、ComC三个组件，同时ComA组件和ComB组件又有自己的子组件ComD、ComE、ComF、ComG、ComH。

computed 计算属性

  • 类型: { [key: string]: Function }

  • 详细：

computed计算属性，是一个有返回值的函数，可直接被当作绑定数据来使用。因此类似于data属性，代码中可通过this.计算属性名来引用，模板中也可通过{{ 计算属性名 }}来绑定数据。

需要注意的是，只要是组件中有任何数据发生了改变，那么所有计算属性就都会被重新计算。

  • 示例：

    1.   data = {
    2.       a: 1
    3.   }
    5.   // 计算属性aPlus，在脚本中可通过this.aPlus来引用，在模板中可通过{{ aPlus }}来插值
    6.   computed = {
    7.       aPlus () {
    8.           return this.a + 1
    9.       }
    10.   }

watcher 监听器

  • 类型: { [key: string]: Function }

  • 详细：

通过监听器watcher能够监听到任何属性的更新。监听器在watch对象中声明，类型为函数，函数名与需要被监听的data对象中的属性同名，每当被监听的属性改变一次，监听器函数就会被自动调用执行一次。

监听器适用于当属性改变时需要进行某些额外处理的情形。

  • 示例：

    1.   data = {
    2.       num: 1
    3.   }
    5.   // 监听器函数名必须跟需要被监听的data对象中的属性num同名，
    6.   // 其参数中的newValue为属性改变后的新值，oldValue为改变前的旧值
    7.   watch = {
    8.       num (newValue, oldValue) {
    9.           console.log(`num value: ${oldValue} -> ${newValue}`)
    10.       }
    11.   }
    13.   // 每当被监听的属性num改变一次，对应的同名监听器函数num()就被自动调用执行一次
    14.   onLoad () {
    15.       setInterval(() => {
    16.           this.num++;
    17.           this.$apply();
    18.       }, 1000)
    19.   }

props 传值

props传值在WePY中属于父子组件之间传值的一种机制，包括静态传值与动态传值。

在props对象中声明需要传递的值，静态传值与动态传值的声明略有不同，具体可参看下面的示例代码。

静态传值

静态传值为父组件向子组件传递常量数据，因此只能传递String字符串类型。

在父组件template模板部分的组件标签中，使用子组件props对象中所声明的属性名作为其属性名来接收父组件传递的值。

  1. <child title="mytitle"></child>
  3. // child.wpy
  4. props = {
  5.     title: String
  6. };
  8. onLoad () {
  9.     console.log(this.title); // mytitle
  10. }

动态传值

动态传值是指父组件向子组件传递动态数据内容，父子组件数据完全独立互不干扰。但可以通过使用.sync修饰符来达到父组件数据绑定至子组件的效果，也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。那如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了。

注意：下文示例中的twoWay为true时，表示子组件向父组件单向动态传值，而twoWay为false(默认值，可不写)时，则表示子组件不向父组件传值。这是与Vue不一致的地方，而这里之所以仍然使用twoWay，只是为了尽可能保持与Vue在标识符命名上的一致性。

在父组件template模板部分所插入的子组件标签中，使用:prop属性（等价于Vue中的v-bind:prop属性）来进行动态传值。

  1. // parent.wpy
  3. <child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>
  5. data = {
  6.     parentTitle: 'p-title'
  7. };
  10. // child.wpy
  12. props = {
  13.     // 静态传值
  14.     title: String,
  16.     // 父向子单向动态传值
  17.     syncTitle: {
  18.         type: String,
  19.         default: 'null'
  20.     },
  22.     twoWayTitle: {
  23.         type: String,
  24.         default: 'nothing',
  25.         twoWay: true
  26.     }
  27. };
  29. onLoad () {
  30.     console.log(this.title); // p-title
  31.     console.log(this.syncTitle); // p-title
  32.     console.log(this.twoWayTitle); // p-title
  34.     this.title = 'c-title';
  35.     console.log(this.$parent.parentTitle); // p-title.
  36.     this.twoWayTitle = 'two-way-title';
  37.     this.$apply();
  38.     console.log(this.$parent.parentTitle); // two-way-title.  --- twoWay为true时，子组件props中的属性值改变时，会同时改变父组件对应的值
  39.     this.$parent.parentTitle = 'p-title-changed';
  40.     this.$parent.$apply();
  41.     console.log(this.title); // 'c-title';
  42.     console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值，当在父组件中改变时，会同时改变子组件对应的值。
  43. }

组件通信与交互

wepy.component基类提供$broadcast、$emit、$invoke三个方法用于组件之间的通信和交互，如：

  1. this.$emit('some-event', 1, 2, 3, 4);

用于监听组件之间的通信与交互事件的事件处理函数需要写在组件和页面的events对象中，如：

  1. import wepy from 'wepy'
  3. export default class Com extends wepy.component {
  4.     components = {};
  6.     data = {};
  8.     methods = {};
  10.     // events对象中所声明的函数为用于监听组件之间的通信与交互事件的事件处理函数
  11.     events = {
  12.         'some-event': (p1, p2, p3, $event) => {
  13.                console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`);
  14.         }
  15.     };
  16.     // Other properties
  17. }

$broadcast

$broadcast事件是由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消。事件广播的顺序为广度优先搜索顺序，如上图，如果页面Page_Index发起一个$broadcast事件，那么按先后顺序依次接收到该事件的组件为：ComA、ComB、ComC、ComD、ComE、ComF、ComG、ComH。如下图：


组件 - 图3

$emit

$emit与$broadcast正好相反，事件发起组件的所有祖先组件会依次接收到$emit事件。如果组件ComE发起一个$emit事件，那么接收到事件的先后顺序为：组件ComA、页面Page_Index。如下图：


组件 - 图4

$invoke

$invoke是一个页面或组件对另一个组件中的方法的直接调用，通过传入组件路径找到相应的组件，然后再调用其方法。

比如，想在页面Page_Index中调用组件ComA的某个方法：

  1. this.$invoke('ComA', 'someMethod', 'someArgs');

如果想在组件ComA中调用组件ComG的某个方法：

  1. this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');

组件自定义事件处理函数

1.4.8新增

可以通过使用.user修饰符为自定义组件绑定事件，如：@customEvent.user="myFn"

其中，@表示事件修饰符，customEvent 表示事件名称，.user表示事件后缀。

目前总共有三种事件后缀：

  • .default: 绑定小程序冒泡型事件，如bindtap，.default后缀可省略不写；

  • .stop: 绑定小程序捕获型事件，如catchtap；

  • .user: 绑定用户自定义组件事件，通过$emit触发。注意，如果用了自定义事件，则events中对应的监听函数不会再执行。

示例如下：

  1. // index.wpy
  3. <template>
  4.     <child @childFn.user="parentFn"></child>
  5. </template>
  7. <script>
  8.     import wepy from 'wepy'
  9.     import Child from '../components/child'
  11.     export default class Index extends wepy.page {
  12.         components = {
  13.             child: Child
  14.         }
  16.         methods = {
  17.             parentFn (num, evt) {
  18.                 console.log('parent received emit event, number is: ' + num)
  19.             }
  20.         }
  21.     }
  22. </script>
  25. // child.wpy
  27. <template>
  28.     <view @tap="tap">Click me</view>
  29. </template>
  31. <script>
  32.     import wepy from 'wepy'
  34.     export default class Child extends wepy.component {
  35.         methods = {
  36.             tap () {
  37.                 console.log('child is clicked')
  38.                 this.$emit('childFn', 100)
  39.             }
  40.         }
  41.     }
  42. </script>

slot 组件内容分发插槽

WePY中的slot插槽作为内容分发标签的空间占位标签，便于在父组件中通过对相当于扩展板卡的内容分发标签的“插拔”，更为灵活、方便地对子组件进行内容分发。

具体使用方法是，首先在子组件template模板部分中声明slot标签作为内容插槽，同时必须在其name属性中指定插槽名称，还可设置默认的标签内容；然后在引入了该带有插槽的子组件的父组件template模板部分中声明用于“插拔”的内容分发标签。

注意，这些父组件中的内容分发标签必须具有slot属性，并且其值为子组件中对应的插槽名称，这样父组件内容分发标签中的内容会覆盖掉子组件对应插槽中的默认内容。

另外，要特别注意的是，父组件中一旦声明了对应于子组件插槽的内容分发标签，即便没有内容，子组件插槽中的默认内容也不会显示出来，只有删除了父组件中对应的内容分发标签，才能显示出来。

示例：

在Panel组件中有以下模板：

  1. <view class="panel">
  2.     <slot name="title">默认标题</slot>
  3.     <slot name="content">默认内容</slot>
  4. </view>

在父组件中使用Panel子组件时，可以这样使用：

  1. <panel>
  2.     <view slot="title">新的标题</view>
  3.     <view slot="content">
  4.         <text>新的内容</text>
  5.     </view>
  6. </panel>

第三方组件

WePY允许使用基于WePY开发的第三方组件，开发第三方组件规范请参考wepy-com-toast。