template模板与component组件区别

template模块与component组件,是小程序中组件化的方式。二者的区别是,template模块主要是展示,方法需要在使用template的页面中定义。而component组件,则拥有自己的js文件,整个component组件类似一个page页面。简单来说,只是展示用,建议使用template,组件中涉及到较多的逻辑,建议使用component。

1、template模块的使用

定义模板,一份template.wxml文件中能写多个模板,用name区分

<template name="one">
  <text class='red' bindtap="click">I'm one,{{hello}}</text>  //注意:1、这里有个点击事件。2、{{hello}}是使用模板时传入的属性(参数)
</template>
 
<template name="two">
  <text>I'm two,nice to meet you</text>
</template>

在页面中引入并使用模板

<!--index.wxml-->
//导入模板
<import src="../../template/template.wxml" />
 
<view class="container">
  <!-- 引用template模板,用is="one"的方式,选择模板 -->
  <template is="one"  data="{{...str}}" /> //传入参数,必须是对象
  <template is="two" />
</view>

在页面中引入模板样式。模板拥有自己的样式文件(用户自定义),只需要在使用页面的wxss文件中引入即可

/**index.wxss**/
@import "../../template/template.wxss";  //引入template样式
.container{
  display:flex;
}

由于template中没有js文件,因此template中的点击事件,在使用页面中的js里定义。如上,name=one的模板有个点击事件click,则click方法,需要在index.js中定义

//index.js
Page({
  data: {
    str:{
      hello:”nice to meet you“
    }
  },
  click:function(){
    console.log("click one");
  }
})

因为template没有自己的js文件,所以在列表中涉及到列表子项独立的操作,建议将列表子项写成component。

2、component组件

创建一个component,只需要在其目录下右键--新建--component,即可直接生成4个文件(json中的设置会默认"component": true)。component组件的结构和page的结构类似,都是有js、wxml、wxss、json四类文件组成。wxss代码与page是一样的,代码就不贴了。其他代码如下:

wxml代码,与page一样

<!--components/hello/hello.wxml-->
<text class="red" bindtap="click">component {{type}}  hello {{name}}</text>

js代码,与page有些许不同

// components/hello/hello.js
Component({
  /**
   * 组件的属性列表,使用组件时,传入的参数
   */
  properties: {
    name:{
      type:String,
      value:''
    }
  },
 
  /**
   * 组件的初始数据,组件内部的数据
   */
  data: {
    type:"组件"
  },
 
  /**
   * 组件的方法列表,组件内部的方法
   */
  methods: {
    click:function(){
      console.log("easy");
    }
  }
})

json代码,需要注明"component": true,表示这是一个组件

// components/hello/hello.json
{
  "component": true,
  "usingComponents": {}
}

page中的使用,与template模板不同,component不需要在wxml中引入,但需要在json中指明使用的组件名及路径。

<!--index.wxml-->
<view class="container">
  <hello name="Easy"/>  //使用hello组件,并传入值为“Easy”的name属性(参数)
</view>
//index.json
{
  "usingComponents":{
    "hello":"/components/hello/hello"  //前面的hello是组件名,可以更改。路径指向使用的组件
  }
}