vue中slot插槽的使用

Posted 2023-04-01

参考技术A

定义一个子组件

父组件中

此时的结果是：

此时的结果是：

当插槽有默认值的时候，重新定义的内容将会覆盖默认内容，反之显示默认内容。

定义一个子组件

父组件

输入内容：

定义一个子组件

父组件：

输出：

输出：

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope

定义一个子组件

父组件

输出：

父组件：重命名

输出：

父组件：定义后备内容，用于插槽 prop 是 undefined 的情形

输出：