vue2---插槽

目录

2 插槽

2.1 概念的基本使用

2.1.1 概念

2.2.2 插槽的基本使用

2.2.3 具名插槽（带有name的插槽）

2 插槽

2.1 概念的基本使用

2.1.1 概念

插槽（Slot)是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

举个栗子：

eg组件好比小霸王游戏机，插槽就是游戏机的插口，看用户插什么卡，就在屏幕（预留的位置）上显示出对应的游戏（内容）。

我们不能把一个游戏机就固定一个游戏，有了插槽，这就一个（游戏机）组件，可以玩（显示出）不同的游戏（用户自定义的内容）。

概念不太容易理解，直接上图：

2.2.2 插槽的基本使用

1. 在Left里面加一个slot标签

2 .在app根组件使用组件里面直接放内容即可

​


      
      
        
        
        
        
        
        
        
      
    

3.这时候插槽的内容就会显示出来啦：

2.2.3 具名插槽（带有name的插槽）

具名插槽以及作用域插槽的基本用法

eg:这里以一个栗子来讲解：

1.Article.vue代码：

​

​

​

2.App.vue代码：

​

​

这样就把用户在app自定义的内容通过具名插槽的方式来显示出来了。

栗子运行截图来了：

星月前端博客https://xingyue.vercel.app/

记录前端学习笔记，欢迎收藏或者提意见。