总结/笔记-vue中的插槽（默认插槽、具名插槽、作用域插槽）

问题：

遇到了一个插槽，写法为 #default = ”{ row }“

插槽知识点：

定义

插槽，用于 在组件中 引用外部组件或自定义组件的内容。

即 子组件中提供给父组件使用的一个占位符，父组件可以在这个占位符中填充任何模板代码，填充的内容会替换子组件的标签。插槽的显不显示、如何显示是由父组件控制，插槽在哪显示由子组件控制。

1. 默认插槽

v-slot:default 即 #default，可省（name属性可以不写，即未定义名字的插槽）

数据流：父组件 -> 子组件

例：引用子组件时，在子组件中插入一段内容，代码如下

在父组件中的传入要插到子组件的内容

2. 具名插槽

具名插槽，即 给插槽起名，给<slot></slot>定义一个name属性。

数据流：父组件 -> 子组件

作用：一个子组件可以放多个插槽，父组件填充内容时，根据名字把内容填充到对应插槽中。

父组件 可以用 v-slot:name 或 #name 往插槽中填充内容。

#插槽名 是 v-slot:插槽名 的简写形式

例子：

3. 作用域插槽

作用域插槽：带数据的插槽，即带参数的插槽。子组件提供给父组件参数，该参数仅限于插槽中使用，父组件可以根据子组件传过来的插槽数据 来进行不同方式的展示/填充插槽内容。

父组件通过 v-slot: 属性名 = “slotProps” 的slotProps（接受的变量）来获取子组件传出的属性，子组件中通过<slot  v-bind=属性名:"值"  name=“值”>来传递子组件的数据，数据存于 值 中

数据流：子组件 -> 父组件

适用场景：在父组件中访问子组件的数据；子组件的某部分数据，每个父组件都有不同方式/样式的呈现形式。

例子：

在<slot>上使用 v-bind绑定了 vue data 中的定义的数据。

总结与拓展：

1. slot 存在于 子组件，v-slot 在父组件，最终页面展示结果是父组件。

2. 可以通过解构获取 v-slot = { user }，也可重命名 v-slot = “{ user: newName }” 和定义默认值 v-slot = “{ user = '默认值' }”

3. 插槽名 可以动态变化的 v-slot: [slotName]

注：

1. 默认插槽 dafault，可以省略default 直接写 v-slot，缩写为#时不能不写参数，要写成#default

2. 多个插槽混用时，v-slot不能省略default

软件开发原则：多扩展，少修改。

v-slot插槽的位置：

更推荐 将插槽 v-slot 写在<template>元素上，其处理过程不会渲染成真实的DOM节点。

也可用于其他HTML元素上，这样最终插入到子组件会有真实的DOM节点包裹。

另一说法表示，v-slot 属性只能在template上使用，只有默认插槽可以在组件标签上使用。（2020）

问题解决

片头提到的问题：  #default = ”{ row }“，为缩写的默认插槽，即 v-slot:defalut = "{ row }"，其解构了，也对其进行重命名或定义默认值。

参考：详解Vue中的插槽用法：默认插槽、具名插槽、作用域插槽 - 掘金 (juejin.cn)

VUE作用域插槽详解（＜slot＞、v-slot、slot-scope）_别来打扰我的博客-CSDN博客