【Vue】使用插槽和具名插槽解决组件内容传递问题（2）

有的时候我们会遇到这个场景，
代码示例：

就是我再调用一个 myform，回到页面上我们刷新:

你会发现多了一个input框，但是提交按钮不见了，这是为什么呢？‍‍

这是因为我使用你子组件的时候就没给你传插槽的值，‍‍所以这块slot，你就拿不到slot的内容，就没有东西展示。‍‍

一般比如说‍‍点击的按钮，我是希望它如果你没传这个插槽，也应该有一个默认的展示，不然的话我这功能就不好用了。‍‍

遇到这个场景我们怎么给它一个默认值，我们可以这样去写：
代码示例：

在调用slot的时候，‍‍在这两个slot中间写一个default value，然后回到页面上我们刷新，‍‍你会发现这个时候它就会出来default value了。

也就是如果你没有传插槽的内容的时候，‍‍我去调你插槽发现没有内容，我就会用中间的 default value作为一个默认值。‍‍

大家看到的现在default value可以点击，
当然上面这两个组件的调用，你传了插槽，‍‍你传了插槽之后我发现你有slot，那么我就不会用默认值了。‍‍所以这是slot的一个默认值设定的语法，一定要记住。‍‍

还有一些场景，比如说这样的一个例子：
代码示例：

代码解读：
我现在有一个div标签，然后它的名字叫做layout，意思是布局，上面我也使用layout组件。
在这个布局里我把 methods 去掉，它到底要展示什么内容，完全是由父组件来告诉我的，‍‍
那么父组件就要告诉它你展示什么样的一些内容，但是子组件里有一些特殊的逻辑，比如说我现在有一个叫做content的区域，‍‍

这块我写一个content，
content顶部会有header，底部会有footer，我只管 content 部分的展示，但是头和尾到底要展示什么？‍‍需要你父组件调我的时候来告诉我，‍‍
我要怎么写？
代码示例：

在这里就要写一个div，传递一个slot进去，告诉你头和尾展示什么。我
告诉你我有一个header，‍‍
然后我告诉你我还有一个footer，

执行效果：

你会发现你header和footer就必须在content的上面，

或者你换一个位置，把slot放到content的‍‍下边，
我们再来刷新，效果如下：

content变成最上面，header和footer变成最下面了。‍‍

也就是说我这么去写这两个东西加在一起是一个slot：

没法做到一个效果 就是我把header放在content上面，‍‍footer放在content下面，
只能说把这一个区块整体放在content的上面或者content的下面，‍‍有没有办法解决这个问题?

有的有的。‍‍我们可以这样去写，在 div标签上给它一个v-slot标签，‍‍让它等于一个header，
同样的在下面也给一个v-slot标签，让它等于一个footer:

也就是‍‍我告诉你的子组件，我传递的 slot，你把它拆成两个部分，‍‍第一个部分起个名字叫做header，第二个部分起个名字叫做footer，
你看你不传的时候，它是个整体，
现在你传了这两个东西，相当于你告诉它把一个大的slot拆成两个部分，分别是header和footer，

那么拆成两个部分，你下面掉这个slot也不能整体去调用了，你必须再加一个name等于footer:

告诉ta你拆分的 slot你要调的是哪一部分，我可以在下面调用的是footer这个部分，
在上面我调 slot的时候，我让name等于header，
保存一下，再回到我们的页面上刷新。‍‍这个时候它会有错误，我们看哪里写的不对？

此时代码示例：

我们发现直接把v-slot div 的标签上 它是不认、不会生效的。如果你要这么拆分，还要记住你要在外面加一个template‍‍这样的一个占位符，‍‍
然后把你的v-slot标签放到template上里面去。‍‍
此时代码示例：

写完这样的代码，我们再到页面上刷新，‍‍它还会提示我们现在有一点问题：

这块主要的原因我们回到代码里面，我这个语法写的有一些问题， v-slot如果你给它做拆分的时候给它一个名字的话，‍‍不要用等号，要用冒号后面跟这个名字，这样的一个语法才是正确的语法：

我们再回到浏览器刷新，‍‍就没有任何问题了：

我就可以把你传递过来的slot拆分成两个部分，一部分放在‍‍ content的上面，header就展示在这里，一部分放在content的下面，footer就在这里。‍‍那么刚才讲的知识点，我们把它叫做具名插槽，怎么理解具名插槽呢？‍‍

你可以这么去理解，本身我一个插槽只能一个大的区域一起去使用，但是我要把插槽拆成几个部分，‍‍每个部分我在下面可以分开的调用，就要通过一个name来做区分了，

所以我们要给一个大的内容拆成几个小的片段，每个片段要命上名字，‍‍这每一个小的片段，我们就把它叫做一个具名插槽，即：

有了具名插槽之后，你会发现当你父组件向子组件传递一些dom的时候，传递一些标签的时候，‍‍这些东西传到子组件里面，在做渲染的时候，是不是就会变得更加灵活更加方便了？