Passage de données du parent à rendre sur le composant, échec de passage de données

Question

J'essaie de transmettre un nom et un prénom à un composant enfant pour le rendre en tant qu'élément personnalisé. Devrait être simple. Mais je ne suis pas capable de relier mes accessoires pour une raison quelconque. Voici le code parent correspondant ...

 <div class="panel-body"> 
      <full-name :userData.firstname="firstname" 
         :userData.lastname="lastname"></full-name> 
    </div> 

<script> 
    import toggleSwitch from './components/toggleSwitch.vue'; 

    export default { 
     data() { 
      return{ 
       userData: { 
        firstname: '', 
        lastname: '' 
       } 
      } 
     }, 
     components: { 
     'fullName': fullName 
     } 
    } 
</script> 

Comme vous pouvez le voir, j'appelle l'élément et lui transmets mes deux accessoires de données. Une fois là, je ne fais que sortir mes données par interpolation de chaîne, et ... rien ne s'affiche. Voici mon composant de sortie

<template> 
    <div> 
    <p>{{firstname}} {{lastname}}</p> 
    </div> 
</template> 

<script> 

    export default{ 
    props: ['firstname', 'lastname'] 
    } 

</script> 

Est-ce que je manque quelque chose d'évident? Merci d'avance.

Answer 1

Il devrait ressembler à ceci:

<full-name :firstname="userData.firstname" :lastname="userData.lastname"></full-name> 

Syntaxe:

<comp :prop-name='value'></comp>