小程序自定义组件

自定义组件的优势：复用，好维护

小程序复用代码方式：

1.自定义模板复用

第一步：定义模板

 格式：
<template name="模板名称">
    ....  //定义模板结构
</template>

例如：

<template name="list_tpl">
  <view>
    <text>list模板页11111</text>
  </view>
</template>


第二步：使用模板

<import src="引入定义好的模板路径" />

<template is="调用定义好的模板名称" data="传递给模板的数据" />

例如：

<import src="/public/template/list/list" />

  <template is="list_tpl" data="{
  
  { ...listData,...testData }}" />

  其中：listData和testData都是对象

注意： 模板样式必须要使用的页面样式文件单独引入！！！！

例如：@import “…/…/public/template/list/list.wxss”

适用场景：需要最终渲染模板，不需要带业务逻辑的场景

2.自定义组件复用

(1)封装组件三要素：事件（triggerEvent）,slot,props

（2）组件构成：html,css,JS

（3）组件的创建和使用

 创建组件:右键--创建component

  组件的结构与页面的文件类型一样：js,wxml,wxss,json

  JS文件中用
     Component({ })


  使用组件

   在使用的页面中找到对应的页面json文件，例如：index.j