Vue.js cannot use to <slot> to render the parent component

Question

I just try to follow the example about the use of slot on the Vue official site. But it failed, I have made the code very short

parent component

<template>
  <subMenuTemp>
    <div class="text" >
      parent content
    </div>
  </subMenuTemp>
</template>

<script>
  import subMenuTemp from 'src/test/testChildren.vue'
  export default  {
    data() {
    },
    components: {
      subMenuTemp
    }
  }
</script>

children component another .vue file

<template>
  <div class="content">
      <slot>
        old content
      </slot>
  </div>
</template>

<script>
  export default {

  }
</script>

although the code is very short, I still cannot find where is my fault

Answer 1

Make sure to include the two components in your main.js or some .js file that imports Vue. It should look like this:

import Vue from 'vue'
import App from './App'
import subMenuTemp from './test/testChildren.vue'

new Vue({
    el: '#app',
    template: '<App/>',
    components: { App, subMenuTemp }
})

Answer 2

You don't need to register all components in the main file as pointed in other answers.

You just need to import the child component into the parent component just as you do.

See a here: https://codesandbox.io/s/vue-template-oy15j?fontsize=14

// App.vue
<template>
  <div id="app">
    <parent-component message="Hello Vue !"/>
  </div>
</template>

<script>
import ParentComponent from "./components/ParentComponent";

export default {
  name: "App",
  components: { ParentComponent }
};
</script>

// ParentComponent.vue
<template>
  <child-component>
    <div class="test-parent">{{ message }}</div>
  </child-component>
</template>

<script>
import ChildComponent from "./ChildComponent";

export default {
  name: "ParentComponent",
  components: { ChildComponent },
  props: {
    message: String
  }
};
</script>

// ChildComponent.vue
<template>
  <div class="test-child">
    <slot>default content</slot>
  </div>
</template>

<script>
export default {
  name: "ChildComponent"
};
</script>

<!-- Result -->
<div id="app">
  <div class="test-child">
    <div class="test-parent">Hello Vue !</div>
  </div>
</div>