时间戳

首页 > 解决方案 > 带有命名插槽的 Vue 布局

vue.js - 带有命名插槽的 Vue 布局

问题描述

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

<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.jsslot

解决方案

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

<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>

我希望这可以解决您的问题并度过愉快的一天:)

推荐阅读