天天看点

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

有的时候我们会遇到这个场景,

代码示例:

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

就是我再调用一个 ​

​myform​

​,回到页面上我们刷新:

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

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

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

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

遇到这个场景我们怎么给它一个默认值,我们可以这样去写:

代码示例:

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

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

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

大家看到的现在default value可以点击,

当然上面这两个组件的调用,你传了插槽,‍‍你传了插槽之后我发现你有slot,那么我就不会用默认值了。‍‍所以这是slot的一个默认值设定的语法,一定要记住。‍‍

还有一些场景,比如说这样的一个例子:

代码示例:

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

代码解读:

我现在有一个div标签,然后它的名字叫做layout,意思是布局,上面我也使用layout组件。

在这个布局里我把 methods 去掉,它到底要展示什么内容,完全是由父组件来告诉我的,‍‍

那么父组件就要告诉它你展示什么样的一些内容,但是子组件里有一些特殊的逻辑,比如说我现在有一个叫做content的区域,‍‍

这块我写一个content,

content顶部会有header,底部会有footer,我只管 content 部分的展示,但是头和尾到底要展示什么?‍‍需要你父组件调我的时候来告诉我,‍‍

我要怎么写?

代码示例:

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

在这里就要写一个div,传递一个slot进去,告诉你头和尾展示什么。我

告诉你我有一个header,‍‍

然后我告诉你我还有一个footer,

执行效果:

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

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

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

或者你换一个位置,把slot放到content的‍‍下边,

我们再来刷新,效果如下:

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

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

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

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

没法做到一个效果 就是我把header放在content上面,‍‍footer放在content下面,

只能说把这一个区块整体放在content的上面或者content的下面,‍‍有没有办法解决这个问题?

有的有的。‍‍我们可以这样去写,在 div标签上给它一个v-slot标签,‍‍让它等于一个header,

同样的在下面也给一个v-slot标签,让它等于一个footer:

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

也就是‍‍我告诉你的子组件,我传递的 slot,你把它拆成两个部分,‍‍第一个部分起个名字叫做header,第二个部分起个名字叫做footer,

你看你不传的时候,它是个整体,

现在你传了这两个东西,相当于你告诉它把一个大的slot拆成两个部分,分别是header和footer,

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

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

告诉ta你拆分的 slot你要调的是哪一部分,我可以在下面调用的是footer这个部分,

在上面我调 slot的时候,我让name等于header,

保存一下,再回到我们的页面上刷新。‍‍这个时候它会有错误,我们看哪里写的不对?

此时代码示例:

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

我们发现直接把v-slot div 的标签上 它是不认、不会生效的。如果你要这么拆分,还要记住你要在外面加一个template‍‍这样的一个占位符,‍‍

然后把你的v-slot标签放到template上里面去。‍‍

此时代码示例:

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

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

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

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

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

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

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

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

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

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