Vue – Slot 插槽高级应用

需要查看 slot 基础应用可查看文章

Vue – Slot 插槽基本应用

插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的 部分定义为插槽

2022-11-04

高级使用

具名插槽

如果在封装组件时需要预留多个插槽节点，则需要为每个 <slot> 插槽指定具体的name 名称。这种带有具体 名称的插槽叫做“具名插槽”。

为具名插槽提供内容

具名插槽的简写形式

作用域插槽

在 slot 插槽中，子组件的 slot 元素可以回调一些数据到父组件中，即为作用域插槽

子组件中

<slot name="slotFoo" 
      msg="hello Vue" 
      foo="foo Content" 
      :data="userinfo">
</slot>
在子组件中增加 slot 属性，父组件可接收到属性值

父组件中

<template #slotFoo="scope">
</template>

scope = {msg:"hello Vue", foo:"foo Content", data:{name:"zs", age:18}}

解构赋值

<template #slotFoo="{msg, foo, data}">
</template>

scope = {msg:"hello Vue", foo:"foo Content", data:{name:"zs", age:18}}