AXML provides two reference methods: import
and include
.
import
import
can load a defined template.
For example: a template named item
is defined in item.axml
.
<!-- item.axml -->
<template name="item">
<text>{{text}}</text>
</template>
You can use the item
template by importing item.axml
in index.axml
.
<import src="./item.axml"/>
<template is="item" data="{{text: 'forbar'}}"/>
The scope of import
is limited. It only imports the template that is defined in the target file, and the template being imported in the target file will not be imported.
For example, C imports B, B imports A, then the template defined in B can be used in C, and the template defined in A can be used in B. However, C cannot use the template defined in A.
<!-- a.axml -->
<template name="A">
<text> A template </text>
</template>
<!-- b.axml -->
<import src="./a.axml"/>
<template name="B">
<text> B template </text>
</template>
<!-- c.axml -->
<import src="./b.axml"/>
<template is="A"/> <! -- Note: You cannot use import A -->
<template is="B"/>
A template can only have one child node, for example:
Correct example:
<template name="x">
<view />
</template>
Error example:
<template name="x">
<view />
<view />
</template>
include
include
can introduce the entire code of the target file excluding <template/>
, which is equivalent to copying the code to the location of include
.
Code sample:
<!-- index.axml -->
<include src="./header.axml"/>
<view> body </view>
<include src="./footer.axml"/>
<!-- header.axml -->
<view> header </view>
<!-- footer.axml -->
<view> footer </view>
Introduction path
The template introduction path supports relative path and absolute path. You can also load third-party modules from the node_modules
directory.
<import src="./a.axml"/> <! -- Relative path -->
<import src="/a.axml"/> <! -- Project absolute path -->
<import src="third-party/x.axml"/> <! -- Third-party npm package path -->