小程序中引用import和include区别

小程序中有两种引用方式一种是直接引用include，通过它相当于把<templete/>标注的以外的代码全部copy过来当前位置，而import则是相反，它是只引用模板

• import方式
  这是index.wxml中的代码

<!--src需要写入相对路径-->
<import src="../list/list.wxml"/>
<template is="listTemp"></template>

这是list.wxml中的代码

<!--不会被引用-->
<view >listView</view>
<!--会被引用-->
<template name="listTemp">
<view >我是模板</view>
</template>
<!--不会被引用-->
<template is="listTemp">
</template>

import引用作用域是有限制的，引用页面只能使用被引用页面的模板，不能使用被引用页面中引用其它页面模板的模板
这是index.wxml中的代码

<!--src需要写入相对路径引入list.wxml-->
<import src="../list/list.wxml"/>
<template is="listTemp"></template>

这是list.wxml中的代码

<!--src需要写入相对路径引入logs.wxml-->
<import src="../logs/logs.wxml"/>
<template is="logsTemp"></template>
<!--不会被引用-->
<view >listView</view>
<!--会被引用-->
<template name="listTemp">
<view >我是模板</view>
</template>
<!--不会被引用-->
<template is="listTemp">
</template>

这是logs.wxml中的代码

<!--不会被引用-->
<view >logsView</view>
<!--会被引用-->
<template name="logsTemp">
<view >我是logs模板</view>
</template>
<!--不会被引用-->
<template is="logsTemp">
</template>

可以看到index页面只是引用了list中的模板并没有引用logs的模板

• include方式
  index页面

<!--src需要写入相对路径-->
<include src="../list/list.wxml"/>

list页面

<!--会被引用-->
<view >listView </view>
<!--不会被引用-->
<template name="listTemp">
<view >我是list模板:{{name}}</view>
</template>
<!--会被引用-->
<template is="listTemp" data="{{name}}">
</template>

（注意这里用到了name这个属性，我在这里测试了一下，在index.js的data中设置了name:“我是index数据源”，在list.js中也配置了name:”我是list数据源”，结果在引用的时候被引用页面的数据源总是取index.js中的数据，由此可见当用include时本路径下的数据时不引用的，组后我又测试了下点击事件等也都是不行的，可见无论是import方式还是include方式它就是一个引用，被引用的页面所有的交互只和当前引用页的逻辑js进行交互 ）
最后总结就是import可以用来引用模板，在开发中可以避免相同模板的重复编写，而include适合引入组件文件