slot插槽的学习笔记

今日笔记，slot插槽，

我男朋友跟我说，学习一样东西，你需要给自己提三个问题，然后带着这三个问题去研究，

于是我给自己提了三个问题，

slot插槽是什么东西？slot插槽有什么用？slot插槽怎么用？

进入学习：

<slot></slot> //此标签就是slot插槽。

当你看到了如上标签，就说明你转角遇到slot插槽啦。

slot标签在子组件模板中插入使用，可以将它理解为一个占位符，在子组件模板中声明了这么一个占位符，然后在父组件中引入此组件时，便可以在子组件的开始标签和闭合标签之间填入内容。

看代码:（没有slot）

1563612774315.png

可以看到，我在App组件里引入里HelloWorld组件，此时的HelloWorld组件模板里并没有插入slot插槽，所以在父组件中引入的HelloWord组件开始标签和闭合标签之间的内容（如此例子：“只有在当前组件模板内插入slot插槽才能显示这段话”）没有被显示,只显示了子组件模板中的内容（如此例：“这是子组件HelloWorld”）。

代码:（插入slot）

1563613127499.png

当在子组件HelloWorld模板中插入slot插槽后，在父组件中引入的子组件标签之间的内容就可以显示出来了。
如果你能看明白上面的代码例子,那上面的三个问题就迎刃而解了吧,很简单是不是.

• question1:slot插槽是什么东西?
  slot插槽就是<slot></slot>这个标签,相当于占位符,在该组件中插入slot标签,这个时候父组件中引入的该组件的开始标签和结束标签之间就有一个插槽.
• question2:slot插槽有什么用?
  只有当你在组件模板中引入slot标签时,在父组件中引入的这个组件的标签内的内容才会被显示出来.插槽内可以包含任何模板代码，包括 HTML,也包括组件
• question3:slot插槽怎么用?
  如上例代码,在组件模板内部插入slot标签就可以啦.
  好简单啊~
  但是slot并不是只有这么一点点内容哦,
  它还有编译作用域,后备内容,具名插槽,作用域插槽,动态插槽名...

编译作用域

如果你想在插槽中使用data中的数据也是可以.
比如这样:

image.png
由此可得，插槽中可以直接访问当前模板作用域。
提个问题，可以在App组件的HelloWorld组件标签中访问得到HelloWorld组件中的数据msg吗？
可以来试一下，将App组件中的{{message}}改为{{msg}}
image.png
运行结果：
image.png
这里结果报错为msg is not defined,说明不能访问到HelloWorld模板中的数据。
这里可以记住官网中的一条规则：
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
那么如何能获取得到子组件中的数据呢？这里就需要涉及到作用域插槽的知识点了。这个后面再讲~

后备内容

后备内容也很简单，顾名思义，就是有一个备用的内容，当插槽中没有内容的时候，就用这个后备内容补上。用法：将后备内容写在该组件（子组件）的slot标签中的。

image.png

可以看看当插槽中有数据的时候，slot标签中的后备内容还会不会被显示出来

image.png
结果显明：
子组件标签中的内容把子组件模板中slot标签中的后备内容替换了。

具名插槽

具名插槽用于解决有多个slot插槽时，我们希望可以在指定位置显示具体内容的问题。
先来看看当有多个slot标签时页面运行结果会是什么样子的，

image.png
可以看出：子组件模板有多少个插槽，子组件标签内的内容就分别显示多少次。这肯定不是预期期望的结果。
这个时候具名插槽就派上用场了。
<slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽
让我们给slot标签加上name:
image.png
现在是不是就是预期效果啦。
然而...
Vue2.6.0 更新之后，这种用法已经被废弃。正确用法是用v-slot指令来代替(v-slot也和v-bind一样有缩写，缩写符号为”#“)，并且只能在template标签上使用，用法如下：
image.png
现在 <template> 元素中的所有内容都将会被传入相应的插槽。
总结：在向具名插槽提供内容的时候，我们需要在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称
值得注意的是，没有给name值的slot其实都有一个隐含的name:default,任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

作用域插槽

终于讲到作用域插槽了，
让我们回顾一下编译作用域，

image.png

此时App模板是访问不到HelloWorld组件中的数据的，但是还是有方法可以实现App访问HelloWorld的数据的。
实现方法：
我们可以将 msg 作为 <slot> 元素的一个特性绑定上去：

<template>
  <div>
    <div>这是子组件HelloWorld</div>
    <slot :msg="msg"></slot>
  </div>
</template>

绑定在 <slot> 元素上的特性被称为插槽 prop。现在在父级作用域中，我们可以给 v-slot 带一个值(此例为helloWorld,你也可以用别的名称)来定义我们提供的插槽 prop 的名字：

<hello-world>
      <template v-slot:default="helloWorld">访问当前组件的msg数据==={{helloWorld.msg}}</template>
    </hello-world>

运行结果：

image.png
你还可以这样写：
image.png
这个就是用到了解构插槽的知识，可以参考官网，已经讲的很清楚了解构插槽 Prop

本文为自己的学习笔记，感觉讲的有点乱，不过官方文档其实已经讲的很详细了，看不懂的同学可以多看几遍官方文档。