什么插槽?简单的说插槽就是在父组件里面插入的内容。父组件从标签起始到标签闭合就是一个插槽。
为什么要插槽了?试想一下,我们在开发中会遇到很多组件拥有者一些共性,但又不全一样,比如一个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不一样。