Vue中如何巧妙运用插槽实现组件复用？

本文共计1273个文字，预计阅读时间需要6分钟。

Vue中插槽的使用示例：插槽为何要使用：让我们封装的组件更具扩展性。让使用者可以决定组件内部的一些内容到底要展示什么。实际案例：在移动开发中，几乎每个页面都有导航栏。

Vue中插槽的使用案例 插槽slot 为啥要使用插槽

• 让我们封装的组件更加具有扩展性。
• 让使用者可以决定组件内部的一些内容到底展示什么。

实际案例

• 在移动开发中，几乎每个页面都有导航栏，导航栏必然会封装成一个插件，比如nav-bar组件。

  

• 一旦有了这个组件，我们就可以在多个页面中进行复用。

如何去封装这类组件呢？

• 他们有很多区别，但也有很多共性。
• 我们单独去封装一个组件，显然不合适：比如每个页面都有返回，这部分内容我们就要重复去封装。
• 但是，如果我们封装成一个，好像也不合理：有些是左侧菜单，有些是返回，有些中间是搜索，有些是文字，等等。

抽取共性，保留不同。

• 最好的方法就是将共性抽取到组件中，将不同爆露为插槽。
• 一旦我们预留了插槽，就可以让使用者根据自己的的需求，决定插槽中的内容。