模板继承

Vdt提供了模板继承功能，能够让我们定义可被复用的模板。该功能涉及以下标签语法：

  • <t:template> 子模板声明要继承的父模板template，template为模板函数
  • <b:block> 子模板声明要填充到父模板的定义的内容区域block

例如：我们定义父模板

  1. <div>
  2.     <b:header>父模板头部</b:header>
  3.     <div>
  4.         <b:content>父模板内容</b:content>
  5.     </div>
  6. </div>

然后我们继承父模板，假设父模板被编译后的函数名为layout。关于模板编译和引入可以 参考Vdt模板语法

  1. <t:layout>
  2.     <b:header>子模板头部</b:header>
  3.     <b:content>
  4.         {parent()}
  5.         子模板内容
  6.     </b:content>
  7. </t:layout>

在子模板中<b:content>中，我们可以调用parent()拿到父模板定义的内容。

使用<t:template>继承父模板时，我们可以传递数据给父模板，在父模板中，可以通过scope 对象获取子模板传递过来的数据。

  1. // 父模板，假设编译后模板函数命名为layout
  2. <div class={scope.className}></div>
  4. // 子模板
  5. <t:layout class="test"></t:layout>

Vdt模板引擎会将class属性编译成className，所以在父模板中需要取scope.className。 另外for也会编译成htmlFor