小程序之组件和模板的对比

小程序之组件和模板的对比

经过一段时间的学习,现在对小程序可以说是有一定程度上的了解了,在刚开始学的时候,在小程序模板和组件的概念上老是犯糊涂,下面是我对这两者进行一部分方面的对比.

1、使用的场景不同

template主要是模版，对于重复的展示型的部分（比如说一个项目的header或是footer部分）进行展示，其中调用的方法或者数据data都是需要引用页面进行定义
component组件，相对于template更完整，接近于一个独立的模块，有自己的逻辑方法，数据，属性，可以提供外部引用页面使用方法进行交互；
所以 涉及到业务逻辑交互多的重复模块 使用组件component更合适一些，如果仅仅是展示性性 用template即可

2、因为二者在使用上的不同，常把他们放在项目的不同的文件夹里

组件可以把他看成是一个独立部分 ，我们常把他们放作为一个集体放在一个我们自己命名的component文件夹（为什么是component,这个我一直以来都是这么用的，见名知意嘛）

而模板我们常把他看作是一个页面的一部分，所有我们常把他放在pages目录下

3、起作用的文件不同

组件是四个基础的的文件（wxml wxss json js）一起作用
模板起作用的实质上只有wxml wxss两个文件

4、引用的方式不同

组件的引用是在使用组件的页面的json文件上进行配置，具体的组件使用这里就不详细介绍了，大家都知道的啦！
模板的引入需要对应的wxml 和 wxss

<import src="../template/noData.wxml" />
....
<template wx:else is="noData" data="{{baseRes,noDataMsg}}"></template> // 相关的数据来自于引入此模块的页面中数据

在wxss文件
@import "./pages/template/noData.wxss"

5 、开发中的使用不同

模块的使用比较简单，只需在相应的页面引入即可达到使用的目的
组件的使用相对比较的复杂
使用组件的时候难免会涉及到组件和使用组件的页面的数据的传递
page<==>com 之间是可以互相进行数据传递的，这个我打算之后再详细介绍。
除了上文的数据传递的方式
还可以在引用组件的page页面的js文件中获取相应的组件的对象再进行相应的操作

<com id="com"  bindevent="onMyEvent""/>

组件js文件

onReady(){
    // 取不到相关组件的数据
    console.log(this.selectComponent("#com"))
    this.com=this.selectComponent("#com"); // 这句代码的意思是在使用组件页面的js上获取组件对象，从而操作组件的数据方法。
    //取到相应的组件对象 进行相应的处理
	},