百度智能小程序 引用

SWAN 可以通過 import 和 include 來引用模板文件。

import

通過 import 和 template 配合使用，可以將代碼分離以及復用。

代碼示例 

• 首先，在person-card.swan中定義了一個叫person-card的template：

<!-- 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>