Vue插槽详解 | 什么是插槽？

作者 | Jeskson

来源 | 达达前端小酒馆

什么是插槽？插槽的指令为v-slot，它目前取代了slot和slot-scope，插槽内容，vue实例一套内容分发的api，将slot元素作为承载分发内容的出口。

组件的书写：

dada

运用组件模板，可以在里面书写：

会替换dada

插槽内可以写任何模板代码：

 
dada

dada

// 添加图标组件

如果my-link没有包含一个slot元素，之间的任何内容都会消失。

什么是插槽，它是vue提出的一个概念，插槽用于决定将所携带的内容，插入到指定的某个位置，使得模块分块，具有模块化特质。

插槽怎么用？

// 父组件

在父组件中引用子组件中写入想要得显示内容

子组件slotda

在子组件中写入slot，所在位置就是父组件要显示得内容

// 父组件

子组件

具名插槽

子组件

父组件

插槽默认内容

// 父组件

子组件

作用域

子组件

插槽可以是任意内容：

插槽就是Vue实现的一套内容分发的API，将 元素作为承载分发内容的出口。

没有插槽的情况下，在组件标签内些一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容就会跑到它这里了！

Vue.component('child-component', {
 template: `
 
Hello,World!
 `
 })
 let vm = new Vue({
 el: '#app',
 data:{
 }
})

你好

组件之间得内容没有显示，使用插槽就有显示了，看看如何用：

Vue.component('child-component',{
        template:`
            

            Hello,World!
            
            
        `
    })

具名插槽，就是给这个插槽起个名字，slot属性对应的内容都会和组件中name一一对应。

child-component，没有名字得就是默认得。

    
        
        
        

            我是人
            我是默认的插槽
        
    

作用域插槽，在组件上的属性，可以在组件元素内使用！

在template元素上添加属性slot-scope

Vue.component('child',{
        template:`
            

                
            
        `
    })

Vue.component('child',{
        props:['lists'],
        template:`
            

                

                    

                        
                    
                
            
        `
    })

在一个组件中使用 标签，就是定义一个插槽。

如果组件中没包含 任何被传入的东西都会被抛弃。

  

  
dd.
  
dd.

  

  
H

  
A.
  
A.

  
H

在没有指定slot属性的时候 都会放在slot没有name属性的插槽当中。

编译作用域

插槽中的内容不能访问父级作用域

  Logged in as {{ user.name }}

// 部分不能访问 url

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

  

    {{ todo.text }}
  

合成组件：

  
    Your Profile
  

然后你在 的模板中可能会写为：

Vue.component('navigation-link', {
    template: `
      
      
      
    `
  });

当组件渲染的时候，这个 元素将会被替换为“Your Profile”。

插槽内可以包含任何模板代码

 
 
 Your Profile

也可以是组件：

 
 
 Your Profile

但是如果在navigation-link中没有包含一个slot元素，都会让之间得内容都消失得。

具名插槽

需要多个插槽

作用域插槽

Vue.component('todo-list',{
    template:`
    

      

        {{ todo.text }}
      
    
    `
  });
  
  

 

  
  
  
   
   {{ todo.text }}
  
 

看代码后，插槽内容基本了解。对于编译作用域：

  Logged in as {{ user.name }}

该插槽和模板得其他地方一样都可以访问相同的实例属性，就是相同的”作用域“，但不能访问navigation-link标签的作用域。

  Clicking here will send you to: {{ url }}
  

我了解了呢。
后备内容

  Submit

  Submit

作用域插槽

  {{ user.lastName }}



  {{ user.firstName }}


然而上述代码不会正常工作，因为只有  
组件可以访问到 user 而我们提供的内容是在父级渲染的。


  
    {{ user.lastName }}
  

绑定在 元素上的特性被称为插槽 prop

  {{ slotProps.user.firstName }}



  {{ slotProps.user.firstName }}

默认插槽的缩写语法不能和具名插槽混用

  {{ slotProps.user.firstName }}
  

多个插槽的写法：

解构插槽 Prop

function (slotProps) {
  // 插槽内容
}


  {{ user.firstName }}



  {{ person.firstName }}

动态插槽名

❤️ 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]

作者Info：

【作者】：Jeskson
【原创公众号】：达达前端小酒馆。
【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！
【转载说明】：转载请说明出处，谢谢合作！~

大前端开发，定位前端开发技术栈博客，PHP后台知识点，web全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

---

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

---

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达达的CSDN！

这是一个有质量，有态度的博客