Vue教程50--slot插槽

waws520
210 阅读2分钟

slot插槽

  • slot翻译为插槽：
    • 在生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽
    • 插槽的目的是让我们原来的设备具备更多的扩展性
    • 比如电脑的USB我们可以插入U盘、硬盘、手机、音响、键盘、鼠标等等
  • 组件的插槽：
    • 组件的插槽也是为了让我们封装的组件更加具有扩展性
    • 让使用者可以决定组件内部的一些内容到底展示什么
  • 例子：移动网站中的导航栏。
    • 移动开发中，几乎每个页面都有导航栏
    • 导航栏我们必然会封装成一个插件，比如nav-bar组件
    • 一旦有了这个组件，我们就可以在多个页面中复用了
  • 但是，每个页面的导航是一样的吗？No，我以京东M站为例

如何封装这类组件呢？slot

  • 如何去封装这类的组件
    • 它们也很多区别，但是也有很多共性
    • 如果，我们每一个单独去封装一个组件，显然不合适：比如每个页面都返回，这部分内容我们就要重复去封装
    • 但是，如果我们封装成一个，好像也不合理：有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字，等等
  • 如何封装合适呢？抽取共性，保留不同
    • 最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽
    • 一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容
    • 是搜索框，还是文字，还是菜单。由调用者自己来决定
  • 这就是我们要学习组件中的插槽slot的原因

slot基本使用

  • 了解了为什么用slot，我们再来谈谈如何使用slot
    • 在子组件中，使用特殊的元素<slot>就可以为子组件开启一个插槽
    • 该插槽插入什么内容取决于父组件如何使用
  • 我们通过一个简单的例子，来给子组件定义一个插槽：
    • <slot>中的内容表示，如果没有在该组件中插入任何其他内容，就默认显示该内容
    • 有了这个插槽后，父组件如何使用呢
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 ​
 <div id="app">
 ​
     <my_cpn><button>按钮</button></my_cpn>
     <my_cpn></my_cpn>
     <my_cpn></my_cpn>
 </div>
 ​
 ​
 <template id="cpn">
     <div>
         <h2>这是子组件信息</h2>
         <slot></slot>
     </div>
 </template>
 ​
 <script src="../vue.js"></script>
 ​
 <script>
 ​
     const app = new Vue({
         el:"#app",
         data:{
             message:"hello world"
         },
         components:{
             my_cpn:{
                 template:"#cpn",
             }
         }
     })
 </script>
 </body>
 </html>

效果如图所示

  • 当我们的插槽中的数据大多数都是一样的，但是少部分不一样的时候，我们可以在插槽中使用默认值
 <div id="app">
 ​
     <my_cpn></my_cpn>
     <my_cpn><p>waws 就是神!!!</p></my_cpn>
     <my_cpn></my_cpn>
 </div>
 ​
 ​
 <template id="cpn">
     <div>
         <h2>这是子组件信息</h2>
         <slot><button>按钮</button></slot>
     </div>
 </template>

效果如图所示

  • 当组件中的存在多个标签的时候，是所有数据针对整个slot中的数据进行替换
 <div id="app">
 ​
     <my_cpn></my_cpn>
     <my_cpn>
         <p>waws 就是神!!!</p>
         <p>毁灭世界</p>
         <p>唯我独尊</p>
     </my_cpn>
     <my_cpn></my_cpn>
 </div>
 ​
 ​
 <template id="cpn">
     <div>
         <h2>这是子组件信息</h2>
         <slot><button>按钮</button></slot>
     </div>
 </template>

效果如图

avatar
文章
阅读
粉丝