带有命名插槽的 Vue 布局

【问题标题】：Vue layout with named slots带有命名插槽的 Vue 布局
【发布时间】：2021-10-27 13:01:18
【问题描述】：

有可能吗？我有这样的事情：

<template>
  <my-layout>
      <template #header>
          Some header html goes here
      </template>
      Body html here
  </my-layout>
</template>

<script>
import MyLayout from './MyLayout.vue'
export default {
    layout: MyLayout,
    components: {
        //MyLayout
    }
}
</script>

还有这样的模板

<template>
<div>
<slot name="header"/>
</div>
<slot/>
</template>

默认插槽有效，但“标题”插槽不显示自身（除非使用 MyLayout 作为标准组件）。

【问题讨论】：

没有解释如何处理“全局”布局。

标签： vue.js slot

【解决方案1】：

我认为您提供的模板上的结束标签有问题，应该如下所示：

<template>
  <div>
    <slot name="header"> </slot>
  </div>
</template>

之后，layout 属性只排除字符串或返回字符串的函数，所以 parent 应该是这样的：

<template>
  <my-layout>
    <template #header>
      Some header html goes here
    </template>
    Body html here
  </my-layout>
</template>

<script>
import MyLayout from "./MyLayout.vue";
export default {
  layout: "MyLayout",
  components: {
    //MyLayout
  }
};
</script>

我希望这能解决您的问题并祝您有美好的一天:)

【讨论】：

谢谢，可惜没用。