[Vuejs]-Vue.js cannot use to <slot> to render the parent component

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

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>