Vue.js ne peut pas utiliser <slot> pour rendre le composant parent

Question

J'essaie juste de suivre l'exemple de l'utilisation de slot sur le site officiel de Vue. Mais il a échoué, j'ai fait le code très court

composant parent

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

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

composant

enfants un autre fichier .vue

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

<script> 
    export default { 

    } 
</script> 

bien que le code est très court, je ne trouve toujours pas où est ma faute

Answer 1

Assurez-vous d'inclure les deux composants dans votre main.js ou un fichier .js qui importe Vue. Cela devrait ressembler à ceci:

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

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