Vue知识点整理（四）- Vue中的ajax（2）- slot插槽

目录

一、slot插槽

1.1 内置组件 - 插槽

1.1.1 默认插槽

1.2 v-slot

1.2.1 默认插槽

1.2.2 具名插槽

1.2.3 作用域插槽

---

一、slot插槽

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

1.1 内置组件 - 插槽

内置的组件 - slot  和 通过插槽发布内容

1.1.1 默认插槽

使用方式：

父组件中：
        <自定义组件名>
                
html结构
        

子组件中：
        

1.2 v-slot

v-slot 指令

在2.6.0中，具名插槽和作用域插槽引入了一个新的统一的语法：v-slot。它取代了slot和slot-scope，目前官方废除了slot和slot-scope这两个attribute（即 元素标签属性），统一使用v-solt

参数：插槽名 (可选，默认值是 default)

1.2.1 默认插槽

对于默认插槽，v-slot具有一个单独的缩写语句，不带参数的 v-slot 被假定对应默认插槽

父组件中：

        <自定义组件名 v-slot:default="slotProps">
          
{{ slotProps.user.name }}
        

缩写语法：
        <自定义组件名 v-slot="slotProps">
          
{{ slotProps.user.name }}
        

子组件中：
        

        

注意：

• 只有默认插槽时，组件的标签才可以被当作插槽的模板来使用，这样才可以把 v-slot 直接用在组件上，不然必须放在template标签内
• 默认插槽的单独写法不能和带参数的v-slot混合使用否则会可能造成作用域混乱

1.2.2 具名插槽

使用方式：

父组件中：
        <自定义组件名>
            
        

子组件中：
        

具名插槽的缩写：参数之前的所有内容 (v-slot:) 替换为字符 #，例如：

父组件中：
        <自定义组件名>
            
        

注意：

1. 该缩写只在其有参数的时候才可用 
2. 默认插槽的缩写和v-slot缩写不能够连用

1.2.3 作用域插槽

• 数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定

案例练习

App.vue

Games.vue