主板上的slot的接口 slot1接口

文章插图
前言：
vue的slot主要分三种：1. 普通插槽；2. 具名插槽；3. 作用域插槽。
使用插槽是在存在父子关系的组件中使用，我们可以在子组件中决定插槽的位置，同时子组件也可以给这些插槽的默认信息，当父组件中没有需要给子组件插槽插入信息时，显示的是子组件插槽定义的默认信息，下边简单说下vue这三种插槽如何使用。
准备工作：
很简单，就创建父组件testSlot.vue ，子组件children.vue ，并在testSlot组件中注册引入children组件。
一普通插槽的使用：
普通插槽：<slot></slot>
在子组件中定义一个普通插槽：
在开发中我们经常使用到组件之间的传值，但很多情况涉及到的都是数据属性的传值，比如父组件将msg传给子组件：
现在如果是这种情况：
如果子组件中没有使用插槽的情况下：
浏览器中的页面，父组件中的p标签的内容是不会还给子组件的：
这时候，想让父组件定义的p标签传给子组件并显示，可以在子组件中定义一个默认插槽：

在子组件中，你也可以定义多个默认插槽，并在子组件中决定这些默认插槽的位置，父组件要插入的内容，都会被填充到这些默认的插槽中：

当然，父组件定义要插入到子组件的插槽的内容，并不一定只有是dom结构类型的，也可以是一个组件，也可以是普通的数据结构，只要子组件有定义插槽，就会把内容填充进去。
二具名插槽的使用：
具名插槽：<slot name=”名称”></slot>
vue 2.6.0 版本使用具名插槽和作用域插槽有了新的统一语法，使用v-slot替换了之前的slot和slot-scope
什么叫具名插槽？
其实就是在子组件中定义插槽时，给对应的插槽分别起个名字，方便后边插入父组件将内容根据name来填充对应的内容。
子组件中，定义两个具名插槽：
父组件中：
为了验证，子组件中的插槽可以填充任何结构的内容，所以我这边专门在one_slot插槽中插入一个组件，而在two插槽就单纯插入一串普通的数据
页面结果：
当然，子组件可以定义多个同名的具名插槽：

三作用域插槽：
作用域插槽：<slot :自定义name=data中的属性或对象></slot>
通过上边的默认插槽和具名插槽的使用过程中，发现，基本都是父组件中决定要插入到子组件中的内容，而子组件自行决定插槽的位置。
具名插槽，就是实现在子组件中自行决定自己要显示什么内容。
a.子组件：
b.父组件：
这种时候有一种情况需要注意：
如果子组件中只有一个作用域插槽时，父组件可以使用下边这种简单的写法，当然规范点还是加上template模板标签好点：
页面效果：
但是当子组件中有多个作用域插槽时，不建议上边这种简单的写法，因为可能会出现作用域不明确的问题。
子组件有多个作用域插槽时：
父组件使用这种规范的写法，可以避免有时作用域不明确问题：
页面效果：

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：