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

Question

The structure of my vue app is this:

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>

When we create this custom tag "" - it only serves as declarator of a component?

Nothing can be added in btw custom tags? Because I can only see on the webpage what's inside my actual header.vue file, not inside my own custom tags. Is this the vue-idiomatic style? the root.vue that has all other components is only there to put things together, and nothing can go in btw custom tags - they only show what components\other vue files are there? If I want to add something in header- it should go in corresponding separate header.vue file?

The js fiddle is here

Answer 1

What your trying to do is comparable to AngularJS transclusion mechanism. You need to actually tell vuejs where the content will be inserted in the template by using a <slot></slot> element:

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

You can find more about this in vuejs component guide or the dedicated Slot documentation page.