如何在父组件中插入具名插槽以覆盖嵌套warning组件内容

嘿，这个问题其实是要解决插槽透传的问题——就是把上层父组件的插槽内容，传递到嵌套在子组件里的深层组件中，我来给你一步步讲清楚怎么实现～

1. 先理清组件层级 #

我们的结构是三层嵌套：

• 最上层：父组件（要传递自定义警告文本）
• 中间层：component-with-a-warning（内部嵌套了warning组件）
• 最内层：warning（自带text具名插槽，用来展示警告内容）

2. 修改中间组件，做插槽的“中转站” #

要让父组件的内容能传到最内层的warning，得让中间的component-with-a-warning把它收到的text插槽内容，转发给内部的warning组件。具体代码如下：

<template>
  <div class="component-with-a-warning">
    <!-- 把中间组件接收到的text插槽，透传给内部的warning组件 -->
    <warning>
      <template slot="text">
        <slot name="text"></slot>
      </template>
    </warning>
  </div>
</template>

这里的关键是：中间组件自己先定义一个同名的text插槽，然后把这个插槽的内容原封不动地传递给内部warning的text插槽。

3. 父组件的使用方式 #

现在你就能直接在父组件里，像最开始想的那样给component-with-a-warning的text插槽传内容了：

<template>
  <div class="parent-component">
    <component-with-a-warning>
      <template slot="text">
        Custom warning text from parent!
      </template>
    </component-with-a-warning>
  </div>
</template>

这样一来，父组件传入的自定义文本就会顺利显示在最内层的warning组件里啦～

内容的提问来源于stack exchange，提问作者Slavic