Vue中插槽的使用

插槽slot 为啥要使用插槽 让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。 实际案例

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

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

如何去封装这类组件呢？ 他们有很多区别，但也有很多共性。我们单独去封装一个组件，显然不合适：比如每个页面都有返回，这部分内容我们就要重复去封装。但是，如果我们封装成一个，好像也不合理：有些是左侧菜单，有些是返回，有些中间是搜索，有些是文字，等等。 抽取共性，保留不同。 最好的方法就是将共性抽取到组件中，将不同爆露为插槽。一旦我们预留了插槽，就可以让使用者根据自己的的需求，决定插槽中的内容。是搜索框还是文字，还是菜单，由调用者自己来决定. 实例 需求:我想在第三个组件中添加一个按钮.

运行截图

显然不符合我的预期,所以我们需要定义插槽

引入插槽

  
    我是插入的sapn标签
    我是插入的i标签
    我是插入的按钮
    我是插入的按钮
  


  

  

运行截图

这次用了插槽,我就可以在组件中插入不同的DOM元素,实现了我的需求

插槽的默认值

当没有给插槽指定显示元素时,会显示默认值,也就是上面的button按钮

如果要在插槽里显示多个值,同时放入组件中进行替换,一起作为替换元素.

  
    
      我是插入的i标签(一)
      我是插入的h1标签(二)
      我是插入的i标签(三)
    
  

  

  

运行截图

可以看到全部替换了

具名插槽slot

使用name属性来对插槽进行区别.(和css里的类名差不多)

    
      
      标题
    
  

  

运行截图

只对中间插槽进行了替换