小程序-【小程序组件化】之template模板、component自定义组件区别、适用场景

在小程序开发中，要实现页面组件化。小程序文档提供了自定义组件 component 方式和组件模板 template 方式。虽然他们都可以帮助我们更加高效地开发小程序，但它们不同的应用场景和功能区别没有明显的阐述。

掌握了这两种两种方式对你在开发是，页面代码不会过多，导致查找浪费。

一、component自定义组件

1.概念

自定义组件是指可以被多个页面使用的组件，可以在小程序中多次复用。在开发中可以讲一个页面中的代码和样式抽象出来。然后创建一个自定义组件，在其他页面可以使用这个自定义组件，从而达到复用和样式统一目标。

2.定义自定义组件

首先新建 components 文件夹,右击 "新建 component",创建一个my-component组件,文件结构如图:

wxml 代码结构:

// my-component.wxml
<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

js 代码逻辑

// components/my-component.js
Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function () { }
  }
})

3.使用自定义组件

在父组件的index.json的 usingCoponents 中引入我们的 my-component 组件:

在父组件的 index.wxml 页面中使用 index.json 中定义的 my-component 属性名:

 页面正常展示我们传入的 innerText 内容:

4.组件传值

上面我们使用了 innerText  属性向 my-component 组件传递了"Some text"字符串，并展示了出来。那自定义组件又如何向父组件传值？这里我们需要使用小程序自己带API， triggerEvent() 方法向父组件传值。如：

 在my-component.js中使用这个 customMethod 方法：

 之后在父组件的 index.wxml 中使用 triggerEvent 传递回的 myevent：

 并在父组件的index.js中使用该 hanldeMyevent，并打印出参数：

 控制台中看到打印 data 参数里，detail 属性就是我们要向父组件传递的参数：

二. template 组件模板

1.概念

组件模板是一个小程序页面的模板。可以在页面定义为多个组件模板的结构和样式，从而快速地创建新的页面，并切也保证页面结构和样式的统一性。

2.定义模板

下面我们创建一个商品列表的 good-list 模板组件，目录结构如下： 

注意：可以发现，template 模板组件中没有good-list.js文件。因为 template 模板组件的逻辑部分需要写在父组件的.js文件中：

<!-- goods-list.wxml -->
<template name="goodsList">
  <view class="goods-list">
    <view class="goods-item" wx:for="{{goods}}" wx:key="id" bindtap="handleClick">
      <view class="goods-name">
        {{item.name}}
      </view>
      <image class="goods-img" src="{{item.image}}"></image>
      <view class="goods-price">
        {{item.price}}
      </view>
    </view>
  </view>
</template>

/* good-list.wxss */
.goods-item {
  display: flex;
  margin: 20rpx 0;
  justify-content: space-between;
  align-items: center;
}
.goods-img{
  width: 100rpx;
  height: 100rpx;
}
.goods-name{
  font-size: 36rpx;
}

.goods-price{
  color: #BE8231;
}

3.使用模板

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

我们在模板组件中定义name属性是goodsList，在index.wxml页面里我们也需要在is属性写入 goodList 名称

<!-- index.wxml -->
<view>
  <!-- 以下是对template模板的引用 -->
  <import src="./templates/good-list/good-list" />
  <template is="goodsList" data="{{goods}}"></template>
</view>

/* index.wxml */
const app = getApp()

Page({
  data: {
    goods: [
      {
        id: 1,
        name: '商品1',
        price: 10.99,
        image: '../images/goods1.jpg'
      },
      {
        id: 2,
        name: '商品2',
        price: 9.99,
        image: '../images/goods2.jpg'
      },
      {
        id: 3,
        name: '商品3',
        price: 8.99,
        image: '../images/goods3.jpg'
      },
      {
        id: 4,
        name: '商品4',
        price: 7.99,
        image: '../images/goods4.jpg'
      },
    ]
  },
  /* 这里是子模板 good-list 中定义的点击方法，但需要写在父组件中 */
  handleClick(){
    console.log("这里是template模板组件事件")
  }
})

注意：这里需要注意是，如果给模板传入的是相对的图片地址时。路径应该是相对于父组件页面的路径地址，而不是相对于 template 模板组件的路径图片地址； 

 wxss的样式引入需要我们是 @import 引入我们的模板地址，如：

 最后页面呈现：

三、总结

在一个项目我们可以使用 component 自定义组件为我们项目中多次使用的公共组件抽离出来，放在conponents公共文件夹中作为公共组件使用。template模板组件需要在多处页面使用类似的模块或页面中多次使用的模板，就需要创建 template 模板。两者都可以减少代码量，同时代码高度复用，便于维护，实现项目组件化开发小程序。

• component 有自己的.json、.wxml、.js、.wxss文件，和正常的小程序页面接口一样。它同时也可以自己引入别组件作为自己的子组件，所以自定义组件功能更加完整，适合做公共组件；
• component组件在页面中.json文件中的 usingComponents 中引入后，就可以在页面中使用；
• 父组件向 component 组件传值，component 组件也可以向父组件传值；
• 在同一个WXML文件中创建多个类似的 template 模板，用 name 属性来区分就行；
• template 模板组件需要使用 import 引入WXML和WXSS；
• template 模板组件中的逻辑部分需要写在引入页面的父组件逻辑中；
• 通过 template 标签使用模板，template 标签的 is 属性与模板的 name 属性对应，data属性代表传入的模板的数据；

四、结语

至此，本篇文章的内容结束了。文章有不对或不完整的地方，望多指点；
如果对你学习小程序有所帮助，还请点赞、评论、收藏、关注、分享；
希望可爱你动动小手关注订阅，一起进步期待你的三连支持；