vue 带动画效果的NavBar

前沿

---

小编在开发项目过程中遇到一个交互的需求，带动画的Navbar，就是类似于element-ui的tabs标签页的动画效果，由于种种原因吧，小编就开始自己搞了一个，在这过程中发现了插槽这个非常有价值的鬼，于是就开始研究了，终于搞了一个可以复用的组件，分享出来大家一块学习。

---

微信图片_20180709141406.png

声明：

slot 的介绍在代码中会有体现，话不多说，上代码。

---

1,新建一个公共的承载NavBar的组件，这里起名为NavBar.vue，这个公共的组件中主要是NavBar中的Title以及点击事件和一些动画效果的实现，为了实现真正意义上的组件，这里将所需要的内容以插槽（slot）的形式插入到NavBar这个组件中，以达到灵活控制。

2,新建一个你要引用的页面，这是叫homepage.vue

3,若采用将组件插入的形式，需要再建一个页面叫itemContent.vue，这里主要是展示切换的选项卡的内容

至此整个功能就完成了，这里边主要的收获还是slot插槽的使用，虽然不是特别的透彻，但还是理解了一部分，目前的使用是木有问题的，后续在更新自己的理解。有什么错误希望多多指正。