vue复习（五）slot插槽

什么插槽？简单的说插槽就是在父组件里面插入的内容。父组件从标签起始到标签闭合就是一个插槽。

为什么要插槽了?试想一下，我们在开发中会遇到很多组件拥有者一些共性，但又不全一样，比如一个li下面可能是h1,h2,h3，那么这个h1,h2,h3就不能写在组件内部，当然我们可以用prop传值加v-if判定，但是这很不爽。

所以我们可以用到插槽。我们可以在父组件内部去写我们的h1,h2,h3，然后分发父组件得到内容。这样就j简单的多。同时我们也可以通过插槽去拿到父组件的值。这样我们编写的组件就更加的灵活易用，增强我们的复用性。

so先看一个简单的例子看看slot的基本实现:

子组件通过slot来分发父组件的默认内容

父组件内部插槽插入h1标签，即子组件的获得的内容渲染.

没错简单的插槽就是这么实现的，很简单的吧，当然插槽肯定不止这些，继续往下看。

有些时候我们不想分发父组件的全部内容，我只想要一部分，也许我们可以看看具名插槽:

给子组件name表示分发的插槽是谁。

​

父组件通过v-slot来指定插槽是谁。

这样我们就只分发对应的父组件的v-slot绑定的名称的组件。

当然v-slot你觉得很不爽。那么我们可以简写一下。用#试试。即都可以写成#:h1这种形式.

也许你就会问了我父组件想要拿到子组件里面的值怎么办，当然不用担心，插槽当然有准备，我们来看看作用域插槽：

 

还是这个例子，你会发现我们绑定了一个数据，这个数据就是我们要让插槽拿到的数据。子组件不需要多麻烦就这么简单。你就能让父组件拿到该数据。我们去父组件看下：

 

我们看到这里的v-slot被赋予了一个值，这个值就是子组件传过来的值，传过来的是一个对象我们直接可以解构获取。

 

ok成功的获取到了值。

当然有时我们插槽没内容是我们需要备用内容，我们直接在slot标签内部写就行。

插槽没内容就会渲染slot内部的内容。

当然你还得记住v-slot只能用在template上或者组件上。否则vue会抛出错误。这个以前版本的slot,scope-slot不一样。

 

 

 

转载于:https://my.oschina.net/u/3589917/blog/3082960