javascript - vue js 中的自定义标签 - ... 之间不能插入任何内容？

Question

我的 vue 应用程序的结构是这样的:

root.vue:

<template>

<header-yo> <h1> visible? or not? </h1> </header-yo> //content btw tags is invisible
<footer> </footer>

</template>

<script>
import Footer from "./components/footer";
import Header from "./components/header";

export default {
  components: {
    "footer": Footer,
    "header-yo": Header  // header-yo is "custom tag" now!
  }
};
</script>

<style> ...</style>

标题:

<template>
 <h1>rrrrr</h1> //this is visible

</template>

<script> </script>

<style scoped>  </style>

当我们创建这个自定义标签“”时 - 它仅充当组件的声明符？

顺便说一句，自定义标签中不能添加任何内容？因为我只能在网页上看到我的实际 header.vue 文件中的内容，而不是我自己的自定义标签中的内容。这是vue惯用的风格吗？拥有所有其他组件的 root.vue 只是将东西放在一起，顺便说一句，自定义标签中不能包含任何内容 - 它们只显示有哪些组件\其他 vue 文件？如果我想在 header 中添加一些内容 - 它应该放入相应的单独 header.vue 文件中？

js fiddle 是 here

Answer 1

你想要做的事情与 AngularJS 嵌入机制相当。您实际上需要使用 <slot></slot> 告诉 vuejs 内容将插入到模板中的何处。元素:

<template>
  <h1>rrrrr</h1> // this is visible
  <slot></slot>  // this is where "<h1> visible? or not? </h1>" would be inserted
</template>

您可以在vuejs component guide中找到更多相关信息。或dedicated Slot documentation page .