两种组件方式

  • template组件：主要用途是用与展示页面，方法只需要在页面定义，而且template组件没有业务逻辑文件（JS）与配置文件（JSON）。

  • component组件：有自己的业务逻辑，如果涉及到的逻辑较多，使用component即可。

    template组件化

  • 只需要创建template文件，在这个文件内新建想要封装的组建文件夹，里面就存放wxml与wxss。

  • 多个template组件之间，可以用 name 区分，页面调用也是以 name 指定对应的template，如下：
    1. <template name="packModule">
    2.   <view class="packModule">packModule</view>
    3. </template>

    页面应用

在index.wxml里，可以如下 ：

  1. <!--导入模板-->
  2. <import src="./modules/pack.wxml" />
  4. <!--嵌入模板-->
  5. <view wx:for="{{moduleInfoList}}" wx:for-item="moduleInfo" wx:key="index">
  6.   <template is="packModule" data="{{moduleInfo}}" wx-if="{{moduleInfo.style == 5}}"></template>
  7. </view>

在index.wxss里，需要引入该组件的wxss，如下：

  1. @import "../../libs/templates/module.wxss";

component组件

  • 同样的，可以创建一个 component文件，里面就存放多个不同的component组件，component与正常的页面文件差不多，也有wxml、wxss、json、js这四个文件，但是，在component里，json与js这两个文件与正常页面的不一样。
    1. <!--dialog.wxml-->
    2. <view>
    3.   <!-- 略 -->
    4. </view>
    1. /* 略 */
    1. Component({    //在component里，这里不是Page，而是Component
    2.   //略
    3. })
    1. {
    2.   "component": true,    //必须要写这个，不然组件不能生效
    3. "usingComponents": {}
    4. }

如何引用

在index.json文件里开启组件配置：

  1. {
  2.   "usingComponents": {
  3.       "dialog": "/components/dialog/dialog"
  4.   }
  5. }

接下来在index引用：

  1. <!-- 自定义dialog组件 -->
  2. <dialog id="dialog" global-color="{{globalColor}}"></dialog>

component注意事项

  • 在component样式里，不允许使用id选择器、属性选择器、标签名选择器，只能使用class选择器。
  • 而且，在组件与引用组件的页面中使用 后代选择器 与 子元素选择器 ，在极端条件下会有一些bug，建议避免使用。
  • 样式继承，如果font、color之类的，会从组件外继承到组件内。

组件之间如何通信

父组件向子组件传值通讯：通过 properties 向自定义组件传递数据。

子组件向父组件传值通讯，就需要分别设置触发事件与监听事件，自定义组件可以触发事件，引用组件的页面可以监听这些事件。如下 ：

监听事件：

  1. <!-- 引用组件的页面模版 -->
  2. <view>
  3.   <my-component bindmyevent="myEventListener">
  4.     <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
  5.      <view>这里是插入到组件slot中的内容</view> 
  6.   </my-component>
  7. </view>
  1. Page({
  2.  myEventListener: function(e) {
  3.     console.log(e)
  4.   }
  5. })

触发事件：

  1. <!-- 组件模板 -->
  2. <view class="wrapper">
  3.   <view>这里是组件的内部节点</view>
  4.   <slot></slot>
  5.   <button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
  6. </view>
  1. // components/component-tag-name.js
  2. Component({
  3.   properties: {},
  4.   methods: {
  5.     onTap: function () {
  6.       var myEventDetail = {} // detail对象，提供给事件监听函数
  7.       var myEventOption = {} // 触发事件的选项
  8.       this.triggerEvent('myevent', myEventDetail, myEventOption)
  9.     }
  10.   }
  11. })

总结

如果只是想简单的展示样式，只需要使用 template组件就够了，相反如果想每个组件都有自己的业务逻辑，各自独立，建议使用component组件方法实现。