vue插槽
Posted 奥特曼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue插槽相关的知识，希望对你有一定的参考价值。
目录
(1) 默认插槽
一、插槽(slot) 理解
理解1： 父组件使用子组件时 子组件中可以用一些可复用或者不确定的部分进行占位
理解2： 插槽就是子组件中提供父组件使用的一个占位符 slot表示 ，父组件可以使用这个占位符填充任何模板代码
口诀
1. 子组件内用<slot></slot>占位
2.父组件中使用子组件<Pannel></Pannel>夹着的地方, 传入标签替换slot
组件的使用
二、使用插槽
我们通常使用子组件 只要引入 使用就好了 ，我们再来看插槽怎么使用
只需要在子组件中 定义一个 <slot></slot>标签 父组件在里面写入内容 就可以替换掉子组件中的内容
通过上面已经发现了 父组件直接用子组件时 在里面写入内容 修改了子组件中slot的内容 所以说slot起到了一个占位的作用 说白了看到这里已经完成了插槽的功能 ( • ̀ω•́ )✧
三、插槽的分类
（1） 默认插槽
默认插槽只不过是在slot标签中 可以写一些 默认的内容
总结 ： 通过上面的结果来看 如果我们不在 Chidren 中写入内容 就会显示 slot中定义的默认内容 ， 只要写入了内容 就会替换掉子组件中定义的默认内容
(2) 具名插槽
使用方法：
子： 在slot标签定义一个name属性
父： 在组件内部写入template标签中属性写 slot="slot定义的name值" 他们name值 和 slot值 一定要一一对应
总结：
我们看到结果 第一个没有在内部 写入 slot属性 发现 最终只是渲染了 子组件的内容 并没有用12345覆盖默认值
第二个用了 slot属性 成功达到了具名插槽的目的
使用场景 ：当一个组件有2个以上要传入标签的组件 要区分
扩展 ：我们发现在组件内部 使用了template标签 我们可不可以使用p标签 div 呢？ 有什么区别呢？
最终发现 我们用div来使用的具名插槽最终被渲染成了div标签 而template最终没有被标签渲染
在扩展一下 template中的slot="xx" 可以简写为#xx 只能是 template标签 其他标签不可以奥 ┓(;´_｀)┏
下面为 标红信息 只有template 可以使用 #
(3) 作用域插槽
作用域插槽就是父组件借助插槽获取子组件中的数据
使用方式 ：
子： slot标签中 通过动态属性进行传值
父： 在属性中加上 v-slot:插槽名="变量" (这个变量是个对象哦)
总结 ：
scope使用变量接收的，所以如果传入对象需要scope. 属性名 如果是解构 必须要和传入过来的对象名一致
使用场景 父组件需要借助插槽获取子组件的数据
以上是关于vue插槽的主要内容，如果未能解决你的问题，请参考以下文章