VueJS：当直接（通过路由器）访问孩子时，如何将父母的标记传递到孩子的<slot>中？

Question

在Vue中，（甚至有可能）当直接（通过路由器）访问孩子时，如何将父母的标记传递到孩子的<slot>中。

父母

 <template>
   <child>
       <h2 slot="title">Title - child</h2>
       <p slot="content"> Lorem ipsum dolor immet... </p>
   </child>
 </template>

孩子

 <template>
   <slot name="title"></slot>
   <slot name="content"></slot>
 </template>

谢谢

Answer 1

如果直接拜访孩子（例如，您有一条路径为Child且该路线处于活动状态），则只能由渲染孩子的<router-view>设置位置。

例如

父母

<router-view>
  <h2 slot="title">Foo</h2>
</router-view>

孩子

<div>
  <header><slot name="title"></slot></header>
  <section><slot name="content"></slot></section>
</div>

然后呈现的DOM如下所示：

<div>
  <header><h2>Foo</h2></header>
  <section></section>
</div>

如果父对象自己渲染了孩子的实例（如您的代码示例所示），则这与路由器无关，并且由路由器渲染的孩子与单独渲染的孩子无关由父母。

如果您可以提供有关您要实现的目标的更多信息，我可以为您提供进一步的帮助。