template模板与component组件区别

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

1、template模块的使用

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

在页面中引入并使用模板

     //导入模板
      
       
        
       //传入参数，必须是对象  
      
     

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

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

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

//index.jsPage({  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一样

     
     
      component {
   {type}}  hello {
   {name}}
     

js代码，与page有些许不同

// components/hello/hello.jsComponent({  /**   * 组件的属性列表，使用组件时，传入的参数   */  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中指明使用的组件名及路径。

     
       
        //使用hello组件，并传入值为“Easy”的name属性（参数）
     

//index.json{  "usingComponents":{    "hello":"/components/hello/hello"  //前面的hello是组件名，可以更改。路径指向使用的组件  }}