模板片段--import和include的区别

微信小程序中经常会用到模板片段,需要在不同的地方调用,于是引入了模板概念。
WXML提供了两种文件引用方式import和include.

  • import可以在该文件中使用目标文件定义的template

代码如下:
在a..wxml中定义一个叫A的template:

<!--pages/a/a.wxml-->

<template name="A">
    <text>{{text}}</text>
</template>

在b.wxml中引用a.wxml,就可以使用A模板:

<!--pages/b/b.wxml-->

<import src="../../pages/a/a.wxml" />
<template is="A" data="{{text:'b import a'}}" />

import有作用域的概念,即只会import目标文件中定义的template,而不会import目标文件import的template。c import b,b import a,在c 中可以使用b定义的template ,在b中可以使用a定义的template ,但是c不能使用a定义的template。
代码如下:

<!--page/a/a.wxml-->

<template name="A">
    <text>{{text}}</text>
</template>
<!--page/b/b.wxml-->

<import src="../../page/a/a.wxml" />
<template is="A" data="{{text:'b import a'}}" />

<template name="B">
    <text>{{text}}</text>
</template>
<!--page/c/c.wxml-->

<import src="../../pages/b/b.wxml" />
<template is="B" data="{{text:'c import b'}}" />
<template is="A" data="{{text:'c import a'}}" /><!--c不能使用a定义的template,会报错-->

<template name="C">
    <text>{{text}}</text>
</template>

  • include可以将目标文件除了的整个代码引入,相当于复制到include位置,

例如:c.wxml文件include a.wxml和b.wxml文件,则c.wxml文件会显示a.wxml 和b.wxml文件的内容。代码如下:

<!--page/c/c.wxml-->

<view>     </view>
<view> c.wxml 开始</view>
<include src="../../pages/a/a.wxml" />
<include src="../../pages/b/b.wxml" />
<view> c.wxml结束</view>

import与include的区别:
import可以在文件中使用目标文件定义的template,仅是使用,不会把代码拷贝到import位置。
include可以将目标文件除了的整个代码引入,相当于复制到include位置。

猜你喜欢

转载自blog.csdn.net/leng_nuan/article/details/81390088