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属性的值就是插槽的名字，父组件中在一个