在小程序中自定义组件 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属性代表传入的模板的数据;