WXML导入的两种方式

wxml导入的两种方式：

• import方式
• include方式

模板和模板导入：
模板现在用的很少了，因为现在有自定义组件了。

<!-- 13.1 定义模板 -->
<template name="contentItem">
  <button>click me</button>
  <view>呵呵</view>
</template>

<!-- 13.2 使用模板 -->
<template is="contentItem" />

显示的内容不确定，我可以自己决定要显示啥，就用{{}}和data

<!-- 显示的内容不确定 -->
<template name="contentItem">
  <button>{{btnText}}</button>
  <view>{{content}}</view>
</template>

<template is="contentItem" data="{{btnText: '自定义button111', content: '自定义text111'}}" />
<template is="contentItem" data="{{btnText: '自定义button222', content: '自定义text222'}}" />
<template is="contentItem" data="{{btnText: '自定义button333', content: '自定义text333'}}" />

如果我的模板想在其他页面中使用，做法：

• 先将template代码抽取到一个单独的wxml文件中
• 用<import />组件来导入这个template
• 使用

创建 /wxml/template.wxml 文件，并将template代码引入

在其他页面 导入template的代码，绝对路径和相对路径都可以
<import src="/wxml/template.wxml" />

使用
<template is="contentItem" data="{{btnText: '自定义button111', content: '自定义text111'}}" />

特点：不能循环导入
什么意思：不能在模板a中导入另一个模板b，然后在页面中导入模板a，这样做是不会显示b的内容的。

include方式导入

include的导入方式，会导入除了<template><wxs>之外的代码
比如有个header.wxml和footer.wxml，就可以导入这俩了。

header/wxml：
<view>我是header</view>

footer.wxml:
<view>我是footer</view>

<!-- include导入方式 -->
home.wxml:
<include src="/wxml/header.wxml" />
<include src="/wxml/footer.wxml" />

特点：include是可以循环导入的
比如我可以将A页面导入到B页面，并将B页面导入到C页面。这时候C页面会将AB的代码都加载进去。