Vue插槽总结及一点思考

Vue-slot

插槽的作用，就是给引用者一定的自我发挥空间，在引用组件内部，添点自定义的东西。
插槽内允许填充后备内容，为没有提供内容的引用作兜底显示。
v-slot只能用在组件标签或template标签上！

匿名插槽

匿名插槽有隐含的name: default。但我们往往不写，同时引用的子组件中，可以一次使用多个匿名插槽，但不建议这么做，毕竟渲染出的内容一模一样。

具名插槽

一个组件可以用多个具名插槽，具名插槽提供缩写#slotName，匿名插槽如想使用此写法即用#default。

作用域插槽

可以让父组件拿到子组件独有的数据。

//子组件
<template>
  <div>
    <h3>作用域插槽</h3>
    <slot :colorList='colorList'>{{colorList.red}}(这里的red只是后备内容)</slot>
  </div>
</template>

//父组件引用
<Scope-slot>
  <template v-slot:default='{colorList}'>
     <p>{{colorList.blue}}</p>
  </template>
</Scope-slot>

v-slot后面需要指明slot的name，或者用独占默认插槽的缩写语法：v-slot=‘slotProps’，slotProps并不是固定名词，可以使用任意的名字替换。

同时父组件中的插槽prop支持结构写法，可用此方法来对传来的prop对象重命名（"{ colorList: color }"）、或设置默认值（"{ colorList = { red : '红色' } }"）

大家可以到我的沙盒来看看具体代码使用：沙盒链接

启发

在父子组件通信中，
props：父组件数据 -> 子组件，子组件只能读不能写，
slotProps：子组件数据 -> 父组件，父组件只能读不能写
.sync：父组件数据 -> 子组件，子组件“可读可写”（其实是通过$emit触发父组件改值而已）