关于vue slot 的多级传递使用

关于vue slot 的多级传递使用

关于slot 以及scope-slot的基本使用，官方文档已经有了详细的介绍：点击这里查看，这里就不复述了。

但是在实际的使用过程中，常常会出现外部组件内容需要多级嵌套传递到目标组件，那么slot可以如何实现呢？
现在假设有A，B，C三个组件，层级关系为A>B>C(爷爷，父亲，儿子)

C:

<div>
    C组件
    <div>
      <slot name="pane" :data="我是C">我是c组件(儿子)---外部没传递，我才显示</slot>
    </div>
</div>

B:

<div>
    B组件---这是一个中间传递的slot
    <C>
        <div slot="pane" slot-scope="{data}">
          <slot name="pane" :data="data"></slot>
        </div>
    </C>
</div>

A:

<div>
    A组件
    <B>
    <div slot="pane" slot-scope="{data}">
      {{data}}注意，我要传到C了
    </div>
    </B>
</div>

其他扩展用法跟此类似

 

 

Vue3 slot插槽多层传递

如果你想传递一个slot，从爷到孙的传递， 看了网上的一些方案，依赖注入都来了，其实没那么麻烦

直接上代码

最顶层组件，插入一个按钮到 slot name为 btn的 插槽里面，Button接收一个row的参数，参数可能有多个，这里 用了 { row } 只取 row

<topComponent>
    <template #btn="{ row }">
        <Button :row="row"/>
    </template>
</topComponent>

在中间组件，这里把插入一个 插槽 插入到 slot name为 btn的 插槽里面，它接收一个 row的参数， 从 v-slot:btn / #btn 里面来的

 slot的参数传递是从下往上的,通过 #btn=“xxx” xxx来接收

<middleComponent>
    <template #btn="row">
         <slot name="btn" :row="row"></slot>
    </template>
</middleComponent>

最底层组件，仅有一个插槽，向上传递 item的值 为 row的参数。

<bottomComponent>
    <slot name="btn" :row="item"></slot>
</bottomComponent>

以上。
从顶层组件插入的Button组件，就能获取到最底层组件传递过来的值，Vue3本身就支持这种 slot 跨层传递，不需要那些额外的骚操作 XD

 

<topComponent><template #btn="{ row }"><Button :row="row"/></template></topComponent>