template和component自定义组件之间的区别

在小程序中自定义组件 component 方式和组件模板 template 2种方式实现页面组件化。

 一、component自定义组件

1.概念

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

关于组件的具体使用可以翻看之前的文章，不再赘述~~~~~ 

二. template 组件模板

1.概念

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

2.定义模板

<template name="empty">
  <view style="width: 100%; height: 100%;background-color: rebeccapurple;">空页面</view>
</template>

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

3.使用模板

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

<view>
<import src="./templates/empty"/>
<template is="empty" data=""/>
</view>

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

@import "./templates/empty.wxss"

三、总结
在一个项目我们可以使用 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属性代表传入的模板的数据；