Vue学习之深入了解组件(二)

上一篇：Vue学习之深入了解组件

插槽

---

Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

具名插槽

<slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽。

插槽的默认内容

你可以在 <slot> 标签内部指定默认的内容来做到这一点：

<button type="submit">
  <slot>Submit</slot>
</button>

如果父组件为这个插槽提供了内容，则默认的内容会被替换掉。

编译作用域

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

动态组件 & 异步组件

---

在动态组件上使用 keep-alive

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

注意这个<keep-alive>要求被切换到的组件都有自己的名字，不论是通过组件的name选项还是局部/全局注册。

过渡 & 动画

---

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡。真是太强大了。最后，创建动态过渡的最终方案是组件通过接受 props 来动态修改之前的过渡。一句老话，唯一的限制是你的想象力。

路由

---

对于大多数单页面应用，都推荐使用官方支持的 vue-router 库。更多细节可以看 vue-router 文档。