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标签,这个时候父组件中引入的该组件的开始标签和结束标签之间就有一个插槽.
• 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

可以看出：子组件模板有多少个插槽，子组件标签内的内容就分别显示多少次。这肯定不是预期期望的结果。
这个时候具名插槽就派上用场了。
元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽
让我们给slot标签加上name:

image.png

现在是不是就是预期效果啦。
然而...
Vue2.6.0 更新之后，这种用法已经被废弃。正确用法是用v-slot指令来代替(v-slot也和v-bind一样有缩写，缩写符号为”#“)，并且只能在template标签上使用，用法如下：

image.png

现在