聊聊Vue如何使用自定义插槽Slot

2024年 6月 3日 41.7k 0

Vue 中使用 slot 的方式取决于你是使用 Vue 2 还是 Vue 3,因为这两个版本在插槽(Slot)的语法上有所不同。

下面是两个版本的基本使用方法:

1. vue2 如何使用slot

在 Vue 2 中,slot 是用来实现组件内容分发的一个关键特性,它允许你在父组件中定义一块内容,然后在子组件中决定如何展示这块内容。

Vue 2 提供了几种类型的 slots,包括默认插槽、具名插槽以及作用域插槽。

以下是它们的基本使用方法:

1.1. 默认插槽(Default Slot)

默认插槽是最基本的用法,当你在一个组件中没有明确指定插槽名称时,内容将会被分配到默认插槽。

父组件使用:


  
    我是父组件传递给子组件的内容
  

子组件定义:


  
    
    
  

1.2. 具名插槽(Named Slot)

具名插槽允许你有选择地插入内容到子组件的不同区域。

父组件使用:


  
    
      我是头部内容
    
    
      

我是主体内容

子组件定义:


  
    
      
    
    
      
    
  

1.3. 作用域插槽(Scoped Slot)

作用域插槽允许子组件向插槽传递数据。在 Vue 2 中,你可以使用 slot-scope 特性来接收这些数据。

父组件使用:


  
    
      {{ item.text }}
    
  

子组件定义:


  
    

请注意,从 Vue 2.6 开始,你可以使用简写的 v-slot 替换 slot-scope,使得代码更简洁:

使用 v-slot 的简化写法:



  
    
      {{ slotProps.item.text }}
    
  

以上就是 Vue 2 中使用 slot 的基本方法。

更多详细内容,请微信搜索“前端爱好者“, ⇲ 戳我 查看 。

2. vue3 如何使用slot

Vue 3 对插槽的使用进行了简化,并推荐使用新的 v-slot 语法,即使对于默认插槽也是如此。

Vue 3 中对插槽(Slots)的使用进行了改进,使其更加灵活和直观。

以下是在 Vue 3 中使用插槽的基本方法:

2.1. 默认插槽(Default Slot)

默认插槽的使用方式与Vue 2相似,但语法稍有不同。

Vue 3 中不再需要显式地使用  标签,除非你需要配置特定的行为。

父组件使用:


  
    我是父组件传递给子组件的内容
  

子组件定义:


  
    
    
  

2.2. 具名插槽(Named Slot)

具名插槽的使用也保持了类似的逻辑,但现在使用 v-slot 指令更为简洁。

父组件使用:


  
    
      我是头部内容
    
    
      

我是主体内容

子组件定义:


  
    
      
    
    
      
    
  

2.3. 作用域插槽(Scoped Slot)

Vue 3 引入了新的 v-slot 语法,它不仅更简洁,还直接支持作用域插槽的传递。现在你可以直接在 v-slot 中解构来自子组件的数据。

父组件使用:


  
    
      {{ item.text }}
    
  

子组件定义:


  
    

2.4. 动态插槽名称

Vue 3 还支持动态插槽名称,通过将 v-slot 绑定到一个变量即可实现。


  
    
      {{ content }}
    
  

Vue 3 中插槽的改进旨在简化API并提高可读性,同时保持了Vue组件间内容复用的强大能力。

Vue 3 中 v-slot 语法是标准用法,即使对于默认插槽也是如此,尽管默认插槽在子组件中可能不需要显式的  标签。

此外,Vue 3 引入了Composition API,这会影响子组件内部状态管理的方式,但对插槽的使用影响不大。

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论