5.5　include与import引用模板的区别

5.3小节中，介绍了如何使用import来引用模板。小程序还提供了另外一种引入模板的方式：include。

include在使用上同import有以下区别：

• import需要先引入template，然后再使用template；但include不需要预先引入，直接在需要的地方引入模板即可。

• include模式非常简单，就是简单的代码替换，不存在作用域，也不能像import一样使用data传递变量。

如果要在post.wxml中使用include，我们需要做一些改动。

以上代码将block标签中的template更换成了<include>。include同样使用src属性指向模板文件。

更改以上代码后，界面无法显示任何数据。来排查下问题，首先判断模板文件有没有正常地加载到页面中，可以使用调试中的【wxml】面板来看一下post.wxml中有没有postItemTpl的相关代码，如图5-1所示。

并没有显示postItemTpl的相关代码。

为什么呢？

原因在于include无法引入包含有template标签的代码，而现在post-item-tpl.wxml里的所有代码都是被template标签包裹起来的。如果想使用include代替import，那么模板文件内就不能使用template标签。

将post-item-tpl.wxml里的template标签删除，只保留文章本身的wxml代码。再次使用调试下的【wxml】查看post.wxml页面，发现post-item-tpl.wxml代码已被成功地引入到了post.wxml中。

但现在文章的数据并没有显示出来，原因在于include无法向模板里传递变量，它仅仅只是一个占位符，当小程序运行时，会用include的src属性所指向的文件替换include自身。这一点同样可以从调试下的【wxml】面板里看到。

回顾一下代码清单5-9，假想include已经被替换成了post-item-tpl.wxml里的代码，那么要想显示出文章数据，就必须再一次在post-item-tpl.wxml中的{{}}中加入"item"这个变量名，就像代码清单5-5所做的那样，开发者可自行尝试一下。

除了在使用上有所不同，include和import还存在其他不同之处：import有作用域的概念，即只会import目标文件中定义的template，而不会import目标文件import的template。

例如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

而include就很简单了，它只是一个占位符，仅做简单的代码替换。

那么，何时使用include？何时使用import？

这里笔者的建议是，如果模板仅仅是静态wxml，不涉及数据的传递，可以使用include。但如果模板涉及数据绑定，还是建议使用import。所以，这里选择使用import来引用postItemTpl模板。