<template name="A">
 <text>template name: {{name}}</text>
</template>
<template name="B">
 <text>template name: {{name}} {{msg}}</text>
</template>

text{
 color: #cccccc;
}

<import src="/UploadFiles/2021-04-02/template.wxml">

3. 引用模版样式


在 调用页面的 wxml 中引用了 template.wxml 后，模版的样式并不会引用， 需要在调用页面的 wxss 中单独引用 template.wxss 文件。


index.wxss




@import "./tpls/template.wxss"


4. 模版文件中的事件处理


在模版中定义的事件, 需要调用页面中执行。


template.wxml




<template name="A">
 <text bindtap="handleTap">template name: {{name}}</text>
</template>


index.js




Page({
 data: {},
 handleTap() {
 console.log('template 模版 click')
 }
})


5.  import 有作用域


import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。


例如：C 引用 B，B 引用A，在C中可以使用B定义的 template，在B中可以使用A定义的 template ，但是C不能使用A定义的template


6. include 配合 template 模版


如同使用 <import src="/UploadFiles/2021-04-02/xx.wxml">引用和使用模版一样， 同样也可以使用 <include src="xx/xx/xx.wxml />"> 来引用一个模版。


需要注意的是：

  
使用 <include> 引用模版文件时， 并不能分别出模版文件的模版块， 所以使用 <include> 引用的模版文件中只能定义一个模版块。
  
include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置。



<!-- index.wxml -->
<include src="/UploadFiles/2021-04-02/header.wxml">



<!-- header.wxml -->
<view> header </view>




<!-- footer.wxml -->
<view> footer </view>


总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。