vue3 插槽使用方法

vue3 插槽使用方法

让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

包含：默认插槽、具名插槽、作用域插槽、具名作用域插槽

默认插槽

没有名字的插槽，只有一个slot Category标签的内容会替代slot标签

App.vue

  
       
html结构1
       
html结构2
      
      // 通过具名插槽的方式填写
      
      
  

Category.vue

具名插槽

1、在可以在子组件中用多个插槽，子组件用 name，

2、父组件填写方式一：slot="list"

3、方式二：v-slot:list 或者简写为 #list

父组件

    // 多个标签
    
        
    
    
    // 单标签
    我是广告

子组件 Category.vue

父组件还可以用用动态插槽名：

作用域插槽

可以通过插槽完成组件通信，特别是传递 DOM 元素的时候

父组件插槽中可以接收子组件的参数（默认插槽）

  {{ slotProps.text }} {{ slotProps.count }}




  {{ text }} {{ count }}

具名插槽写法

v-slot:name="slotProps" 简写为 #name="slotProps"

useSlots

import { useSlots } from 'vue'

// 获取插槽内容
let slots = useSlots()