二十二、插槽（slot）

组件的插槽

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

■如何去封装这类的组件

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

■如何封装合适，抽取共性,保留不同。

  • 最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽。
  • 一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。
  • 是搜索框,还是文字,还是菜单。由调用者自己来决定。
1. 插槽的基本使用： 2. 插槽的默认值：button 3. 如果有多个值，同时放入到组件进行替换时，一起作为替换元素 
    
    

      
      哈哈哈
      
        呵呵呵
        
我是div元素

        
我是p元素

具名插槽　　

使用name属性对插槽进行定义，并使用 slot="" ，对指定的插槽进行调用

    

      
        
        

          标题

作用域插槽（父组件替换插槽的标签，但是内容由子组件来提供）
Vue2x

相关

标签