Vdt模板继承

要达到上述目的，我们需要定义可扩展的模板，Vdt模板引擎提供了这种能力，你可以参考Vdt文档了解详情。

定义可扩展的模板

使用<b:block>指令，你可以定义可扩展的模板。你只需要将它放置在需要扩展的地方，然后给它一个名称即可。

  1. <div class="page">
  2.     <b:header>
  3.         <header>
  4.             <b:header-content>
  5.                 page header
  6.                 <div ev-click={self.toggleShow.bind(self)}>
  7.                     {self.get('userName')}
  8.                 </div>
  9.                 <ul v-if={self.get('show')}>
  10.                     <li>用户中心</li>  
  11.                     <li>退出</li>
  12.                 </ul>
  13.             </b:header-content>
  14.         </header>
  15.     </b:header>
  16.     <b:body>
  17.         <div class="content">
  18.             <b:content />
  19.         </div>
  20.     </b:body>
  21. </div>

上例中，我们定义了页面的结构，头部包含一个展示用户信息的模块，并且提供了大量的可扩展点。实际开发时，你 可以根据需要控制可扩展粒度。

<b:block>指令可以嵌套，但同一模板中，不要重名

继承模板

使用<t:template>指令，你可以继承模板。其中template为被继承的模板的模板函数名。

下面将上述模板编译成模板函数传入要继承的模板中，这里我们在头部新增一个返回按钮。

  1. var layout = self.layout
  3. <t:layout>
  4.     <b:header-content>
  5.         <button ev-click={self.back.bind(self)}>返回</button>
  6.         {parent()}
  7.     </b:header-content>
  8.     <b:content>
  9.         Page A <br />
  10.         data: {self.get('data')}
  11.     <b:content>
  12. </t:layout>

至此我们完成了模板继承，剩下的事情便是定义组件来管理它们了。