vue插槽详解

声明:在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 'v-slot' 指令)。它取代了 'slot' 和 'slot-scope'这两个目前已被废弃但未被移除且仍在文档中的attribute,本文我们仅仅针对vue2.6及以上版本的插槽语法进行讲解!

一、什么是插槽?

1、定义

官方解释:插槽就是Vue实现的一套内容分发的API,将元素作为承载分发内容的出口。
通俗解释:想要在一个组件标签中,加入一些内容,那就必须要在组件内声明slot元素,否则不会被渲染出来。

2、举个栗子

有这样一个自定义组件navigation-link,在父组件中使用:


  Your Profile

navigation-link组件封装如下:


  

当组件渲染的时候, 将会被替换为“Your Profile”。假设navigation-link组件中不写,那么组件标签中间加入的任何内容都不会生效。

tips:插槽内可以包含任何模板代码,包括 HTML:例子如下


  
   Your Profile


   
    Your Profile

二、具名插槽

1、定义

具名插槽,就是给这个插槽起个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中。

2、如何使用

元素有一个特殊的 attribute:name。这个name属性的值就是插槽的名字,父组件中在一个