1、案例描述

使用一个全局templat模板，在index页面中调用，来打印三个学生对象的信息。

2、实现过程

2.1、代码展示

• index页面中的wxml

<!--index.wxml-->
<import src="../../template/template"></import>
<view class="box">
  
  <template is='student' data="{{...student1}}"></template>
  =======
  <template is='student' data="{{...student2}}"></template>
  =======
  <template is='student' data="{{...student3}}"></template>
  =======
  <template is='student' data="{{name: '麻瓜',age: '26',love: '烫头'}}"></template>
  
</view>

• index页面中的js

//index.js

Page({
  data: {
  student1: {
    name:'张都',
    age:'20',
    love:'喝酒'
  } ,
  student2: {
    name:'马奇',
    love:'吃烟',
    age:'21'
    
  } ,
  student3: {
    name:'程度',
    age:'22',
    love:'打麻将'
  } 
  }
  
  
})

• template文件中的wxml

<!--template/templat.wxml.wxml-->
<template name="student">
    <view>姓名:{{name}}</view>
    <view>年龄:{{age}}</view>
    <view>爱好:{{love}}</view>
</template>

2.2、结果展示

结果.jpg

3、知识汇总

知识总结.jpg
import说明.jpg

4、踩坑说明

• template调用时还是用关键字template
• 注意在template中引用的对象传递参数的名称不能是“汉字”，不然会恶心死你

template代码：

//中文传参
<!--template/templat.wxml.wxml-->
<template name="student">
    <view>姓名:{{姓名}}</view>
    <view>年龄:{{爱好}}</view>
    <view>爱好:{{年龄}}</view>
</template>

js代码：

//中文对象
data:{
 student2: {
    姓名:'马奇',
    爱好:'吃烟',
    年龄:'21'
  } 
}

wxml代码：

//中文对象
<template is='student' data="{{...student2}}"></template>

报错：

报错.jpg

改错方法：模板中传的参数和js中定义对象用的属性名都要为“英文”。

• 注意在写template模板和调用template模板的时候，组件都是template，但是其中使用的属性不同，写template模板时，用的是name=“模板名”。在调用template模板时，用的是is=“模板名”和data=“{{变量名}}”。注意，当变量是一个对象时，要调用对象中的每个键值对，就要用data=“{{...对象名}}”
• 注意模板可以写在项目的任意路径下，引用的时候用import组件，路径src用相对路径。impot具有一次性和直接性，需要哪个template就需要去哪个文件中引用，不能间接调用。