第二十四节:Vue插槽:Vue具名插槽/作用域插槽/v-slot指令

1. 具名插槽

1.1 没有使用具名插槽的问题

有的时候我们在使用子组件时,在子组件模板上不同的位置插入不同的内容, 只有一个插槽显然没发满足我们的需求,看示例:

需求如下:

1. 子组件是一篇文章的结构
2. 父组件在调用子组件是给文章插入标题,正文,时间信息

示例代码如下:

     
     
         
这是一篇介绍vue插槽的文章
         
这是文章的第一段
         
这是文章的第二段内容
         
这是文章的第三段内容

         2020年5月1日
     

结果:

image

示例结果说明:

1. 通过示例结果发现和我们想的天差地别,此时每一个插槽都插入了所有的内容, 显然不符合预期
2. 那么我们怎样才能将分发的内容指定到每一个具体的插槽上呢.

这个时候我们就需要给每个插槽指定名字

1.2 使用具名插槽和默认插槽

元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。

未使用name属性的slot插槽被称匿名插槽, 也可以叫做默认插槽. 我们在子组件中仍然可以有一个匿名插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。

使用具名操作重写上面的示例:

     
     
         
这是一篇介绍vue插槽的文章

         
这是文章的第一段
         
这是文章的第二段内容
         
这是文章的第三段内容

         2020年5月1日
     

结果:

image

此时我们就会发现,分发的内容以及正常插入到对应的插槽上了

通过上面的例子我们就知道了,slot如果没有显示的使用name属性指定插槽的名字,那么slot默认有个名字default,默认插槽,如果在分发内容时,没有指定插槽,所有的内容都将默认插到默认插槽上

2. 作用域插槽

2.1 作用插槽的理解和使用

通过学习我们知道,插槽的内容最后是在子组件模板上渲染的, 那么就会在有得时候需要在分发的内容中使用子组件中才有的数据,怎么办呢. 这个时候就要用到作用域插槽了

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。

简而言之,就是利用slot 标签将子组件的数据传递到分发内中上,就像prop传递数据给组件一样

在父级中，具有特殊特性 slot-scope 的