什么是Vue slot插槽？
----- 介绍内容摘抄自同站， 如有侵权，立即删除 -----
插槽，也就是slot，slot就是子组件里的一个占位符 一个slot的核心问题，就是显不显示，显示的话显示话，该如何去展示出来，这是由父组件所控制的 但是插槽显示的位置是由子组件自己所决定的，slot写在组件template的什么位置 父组件传过来的模板将会显示在什么位置。
1. 插槽基本使用(匿名插槽)
众所周知, vue脚手架创建之后 会生成一个App根组件以及一个HelloWorld组价 如何利用插槽来完成显示内容与隐藏内容? 这个时候我们就能用到匿名插槽来实现 具体代码详看下方 ↓
<-- 这里是我们的App根组件 !--> <template> <Card> <div>我是slot插槽的内容</div> <-- 子组件内的元素都是插槽内容 !--> </Card> </template> <script> import Card from '@/components/Card' <-- 引入子组件 !--> export default { components: { Card } } </script> <style lang="scss" scoped> </style>
<-- 这里是我们的Crad子组件 !--> <template> <div> <h2>我是Card页面</h2> <div class="slot"> <slot /> <-- slot插槽显示子组件插槽内容 !--> </div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ name: 'CardView' }) </script> <style scoped lang="scss"> .slot { color: red; } </style>
问题: 我不想显示插槽内容了该怎么办?
<-- 这里是我们的App根组件 !--> <template> <Card /> <-- 只需要把子组件标签改一下就好了 !--> </template> <script> import Card from '@/components/Card' <-- 引入子组件 !--> export default { components: { Card } } </script> <style lang="scss" scoped> </style>
所以综合以上说的, 插槽内容是根据父组件决定显示隐藏的
2. 作用域插槽
作用域插槽： 就是父组件利用 slot-scope 属性可以拿到子组件传递的数据
例如：
子组件: <slot :name=name> </slot> 父组件: <Child> <template slot-scope="scope"> {{scope.name}} //子组件的name字段 </template> </Child>
3. 具名插槽
具名插槽: 见名知意, 带名字的插槽, 就是渲染到对应名字的插槽
例如:
子组件: // name属性定义 具名插槽 <slot name="a"> 我是默认字段a </slot> <slot name="b"> 我是默认字段b </slot> 父组件: // slot属性接收 name <Child> <template slot="a"> <div>哈哈,我是a</div> </template> <template slot="b"> <div>哈哈,我是b</div> </template> </Child>
时间比较紧,先介绍到这里!
祝你学有所成,我们一起努力~
