模板复用

import 方式引用

  • import 你要引用的模板，语法同原生小程序，建议引用的模板文件名后缀为 tpl，这样引用的模板文件里默认可以使用开发框架定义的模板的语法

  • 使用 tpl 标签引用模板，tpl 标签属性定义同原生小程序，为了避免跟外层 template 混淆，所以这里使用 tpl 简写形式引用模板

  1. <!-- page footer -->
  2. <template name="page-footer">
  3.     <view class="page-footer">
  4.         footer: {{copyRightDate}}
  5.     </view>
  6. </template>
  1. <template>
  2.     <view class="tpl-reuse-wrap">
  3.         <import src="../../common/tpl/footer.tpl"/>
  4.         <view class="main"></view>
  5.         <tpl is="page-footer" :data="{copyRightDate: copyRightDate}" />
  6.     </view>
  7. </template>
  9. <script>
  10. const now = new Date();
  11. export default {
  12.     config: {
  13.         title: '模板复用'
  14.     },
  15.     data: {
  16.         copyRightDate: now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate()
  17.     }
  18. };
  19. </script>
  21. <style lang="stylus">
  22. </style>

注意： 通过 data 属性传入模板数据。

include 方式引用

  • 按原生小程序 include 语法引入要引用的模板文件
  • 引用的模板会被内联过来，因此引入的模板上下文可以访问的模板数据同父模板，不需要传入
  1. <view>Hello: {{from}}</view>
  1. <template>
  2.     <view class="tpl-reuse-wrap">
  3.         <include src="../../common/tpl/include.tpl"/>
  4.     </view>
  5. </template>
  7. <script>
  8. const now = new Date();
  9. export default {
  10.     config: {
  11.         title: '模板复用'
  12.     },
  13.     data: {
  14.         from: 'okam'
  15.     }
  16. };
  17. </script>
  19. <style lang="stylus">
  20. </style>