Vue学习笔记-插槽

Vue过去对于插槽的使用基本依赖于slot以及slot-scope（默认插槽|具名插槽|作用域插槽），但是现在这个两个attribute已经被v-slot 指令所取代（Vue2.6.0）；

这两个attribute虽然已经被官方废弃且不会出现在 Vue 3 中，但在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持；

1、默认插槽（未改变）

不需要声明name或者作用域，直接进行使用，一个组件中只能有一个该类插槽：

// 父组件


// 子组件


// 效果

   
父组件
   

        
子组件
        // slot标签被父组件的信息替换
        

            给子组件的文字
        
   

2、具名插槽

2.x： 具名插槽顾名思义，就是有名字（slot=“” / name）的插槽，可以在组件中使用多个：

// 父组件


// 子组件

// 总结：父组件有slot声明名字并在子组件通过slot name=""调用的就是具名插槽

v-slot:  

// 父组件


// 子组件

// 总结：父组件有template且用v-slot指令声明名字并在子组件通过slot name=""调用的就是具名插槽,而默认插槽在v-slot指令中默认为v-slot:default

3、作用域插槽

2.x： 能够将父组件数据带入子组件，并能在一个范围（域）内打点调用数据的插槽：

// 父组件 


// 子组件 data: ['msg_1','msg_2']


// 效果

   
父组件
   

        
子组件
        // slot标签被父组件的结构替换, 但是其中信息则是子组件的data
        

            msg_1
            msg_2
        
   

// 总结：由父组件提供数据展示的样式，而子组件负责提供数据的就是作用域插槽，假设子组件上是 ,则父组件接受到的对象user就是 {num: 100, a: 1}

v-slot: 

// 父组件 


// 子组件 data: ['msg_1','msg_2']


// 效果

   
父组件
   

        
子组件
        // slot标签被父组件的结构替换, 但是其中信息则是子组件的data
        

            msg_1
            msg_2
        
   

// 总结：由父组件提供数据展示的样式同时用v-slot=“”接收，而子组件负责提供数据的就是作用域插槽，假设子组件上是 ,则父组件接受到的对象user就是 {num: 100, a: 1}

注意：

v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #（v-slot:msg_1 === #msg_1）--具名|（#test="user"）--作用域

除独占默认插槽的缩写语法外， v-slot 只能添加在一个