引用

SWAN 可以通过importinclude来引用模板文件。

# import

通过importtemplate配合使用,可以将代码分离以及复用。

代码示例
在开发者工具中预览效果

  • 首先,在person-card.swan中定义了一个叫person-cardtemplate
<!-- person-card.swan-->
<template name="person-card">
    <view>
        <text>位置: {{pos}}</text>
        <text>姓名: {{name}}</text>
    </view>
</template>
  • 然后,在index.swan里引用文件person-card.swan,并使用它的模板:
<!-- index.swan-->
<import src="./person-card.swan" />
<template is="person-card" data="{{person}}" />
// index.js
Page({
    data: {
        person: {
            pos: 'Baidu',
            name: 'SWAN'
        }
    }
});

import 具有递归的特性。 例如:C 引用 B,B 引用A,在C中可以使用B定义的 template,在B中可以使用A定义的 template ,C也可以使用A定义的template

代码示例
在开发者工具中预览效果

<!-- templateA.swan-->
<template name="A">
  <text> A template </text>
</template>
<!-- templateB.swan-->
<import src="../templateA/templateA.swan"/>

<template name="B">
  <text> B template </text>
</template>

<template is="A"/>
<!-- templateC.swan-->
<import src="../templateB/templateB.swan"/>

<template is="A"/>

<template is="B"/>

# include

通过include可以将目标模板整个(除了 template)引入到当前的位置,相当于inline

代码示例
在开发者工具中预览效果

<!-- index.swan-->
<include src="header.swan" />
<view class="index">body</view>

<!-- header.swan-->
<view class="header">header</view>


include 可以将目标文件除了 <template/>外的整个代码引入,相当于是拷贝到 include 位置,如:

代码示例
在开发者工具中预览效果

<!-- index.swan -->
<include src="header.swan"/>
<view> body </view>
<include src="footer.swan"/>
<!-- header.swan -->
<view> header </view>
<!-- footer.swan -->
<view> footer </view>