自定义标签之间不能有任何内容 - <myTag_vue> ... </> 在 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>

header:

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

</template>

<script> </script>

<style scoped>  </style>

当我们创建此自定义标记“”时 - 它仅用作组件的声明符？

顺便说一句，自定义标签中不能添加任何内容吗？因为我只能在网页上看到我实际 header.vue 文件中的内容，而不是我自己的自定义标签中的内容。这是 vue-idiomatic 风格吗？具有所有其他组件的 root.vue 只是用来把东西放在一起，顺便说一句，自定义标签中什么也不能放——它们只显示那里有什么 components\other vue 文件？如果我想在 header 中添加一些东西- 它应该放在相应的单独 header.vue 文件中吗？

jsfiddle是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 or the dedicated Slot documentation page 中找到更多相关信息。

自定义标签之间不能有任何内容 - <myTag_vue> ... </> 在 vue js 中？

Nothing can go in between custom tags - <myTag_vue> ... </> in vue js?

javascript

idioms

vue.js