我们再来学习一些插槽相关的高级语法， 示例代码：
代码解读：我们通过代码的案例来学习插槽的简写，比如说你现在写了两个具名的插槽，你要写v-slot 冒号head，你可以把它简写成井号head这样的语法就可以了：
你会发现具名插槽 你可以通过这样的一个井号的语法对它做简写。
接着来学习作用域插槽，它是怎么一回事？我来给大家举一个例子。首先我定一个子组件叫做list，在这里面我定一个数据 data，return一个list，它就是一个数组，123就可以了:
我们定义了一个123这样的数组，然后我们在这里写一个div去对123做循环，怎么循环呢？ 示例代码：
V-for等于item in list。这里用item就行了，然后我上面组件就去调用下面的叫做list的组件:
代码解读：
子组件调用一个子组件，子组件里面有一个数据做循环，但是假设有这样一个需求，我现在到底是通过div标签去做我子组件的循环 还是通过其他的标签做子组件的循环？
我可以由外部组件来决定，也就是说我不把它写死，我可以由外部传给我，想做到这个功能怎么做？
我们可以这么去写，我们可以通过一个作用域插槽来写。
首先我在这里告诉子组件你的循环该怎么去展示， 比如说我不用div了，我用一个span标签来展示我的子组件里面的每一项的内容，
我调子组件的时候，把 span 标签通过slot传给子组件。那么在子组件里面怎么去用传递过来的 内容 ？代码示例：
代码解读：在这里是不是就可以用slot的内容了。用了它之后我们需要怎么去做？ 我们现在循环的就不是div标签了，循环的就是slot了，
接着循环slot的时候，slot不知道它要展示什么，如果你这么去写的话，它只会展示三个span标签，因为它不知道中间的内容应该展示什么。
刷新页面，不会报错，你点开页面上应该会有三个span标签:
因为你传递过来了一个slot，我这块把slot循环了三次，接着我要想把123循环的时候让slot做一个展示，可以怎么写?
ni可能会想直接在这写:
你不是循环吗？调用我上面传递过来这个span标签吗？我把item传递给你这个slot标签，slot标签是不是在这里直接能用这个item?
这样写没有任何的效果。 如果你在父组件里写 item 的内容，ta会到父组件里面去找 item 对应的值，但实际上你这个item是在子组件里的，所以你这么用是不行的，那想去用它该怎么办呢？
我们调用slot的时候需要通过属性的形式把对应的参数传给slot，我们把item通过一个叫做item这样的属性传给 slot：
slot这块我就可以去接收，怎么接受？
在这一块我们写内容的时候调list组件的时候，我就可以写一个v-slot等于slotProps，意思是什么？
你调我slot的时候把一些东西传给我了，所有传递给我的内容我都放到slotProps里面去接收。
那么在这里我直接可以通过slotProps点item获取到你调用我的时候传递给我的一些内容，通过span我可以展示它，我改成div，它应该变成三行。
我们写完了作用域插槽之后，我们再来回过来研究一下它的执行流程。 首先我父组件调用list 子组件，这块就是传递给子组件的一个slot：
那么我在子组件里面去循环我内容的时候，我去调用这个slot，意思就是我要通过div这种形式去展示我的内容，但是我在调slot的时候，我把一些数据传给slot，把哪些数据传给slot？把item这些数据传给slot，slot怎么接收它？ 通过v杠slot等于slotProps这样的数据对象， 所有你传递过来的内容都在slotProps里面去接收，那么接收你传过来的内容之后，在这里我就可以用 item 传递过来的值了:
父组件调子组件的时候传slot进来，子组件再通过属性的形式把数据传给父组件，父组件拿到内容之后再决定它怎么显示。
上面代码可以简写成：【叫解构】
因为你slotProps接收到的是你传给 slot所有的内容，我现在只用{item}，你可以直接在这里去把item解构出来，你下面直接就可以用{{item}}。
我们回忆一下作用域插槽解决了什么问题，解决的就是当子组件渲染的内容要由父组件决定的时候，比如说你到底要怎么展示这个列表是由父组件决定的时候，我就可以通过这个作用域插槽来实现。
为什么要作用域插槽？因为通过插槽的写法能够让父组件去调用子组件里面的 item数据，以前我们在父组件里直接写 item 是不行的，因为它只能从父组件作用域里面去找 item 数据，所以找不到它就显示不了，通过这个作用域插槽能够把父组件的 item 数据从子组件传递过来，父组件里面理论上就可以调用子组件的数据了。
我们在写一些Vue组件/插件的时候，我们会用的比较多。
原文始发于微信公众号（基根奋斗营）：【Vue】作用域插槽
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/104472.html
