vue 中 slot 的使用

发表评论
1633 views

slot的主要使用场景应该是类似 fram-layout 的布局，即传统布局的头部，导航，底部固定，中间内容切换的情况。
如果按照传统思路来看，我们在每一个页面分别引入头部，导航，底部，就会造成一些重复代码，slot就可以比较好的解决这种问题。将这些固定的组建放在layout组件中，根据每个页面的内容不同动态切换插槽内容即可。
举一个简单的例子。
代码：
// FramLayout.vue
<div class="FramLayout">
     <head />
     <nav />
     <slot></slot>
     <footer />
</div>

// content.vue，导入组建 FramLayout
<FramLayout>
     Content 页面 内容
</FramLayout>
当组件渲染的时候，content即插入了 FramLayout 中的 ,类似于这样：
<div class="FramLayout">
     <head />
     <nav />
      Content 页面 内容
     <footer />
</div>