web-dev-qa-db-fra.com

Comprendre les accessoires dans vue.js

Je suis en train de parcourir le guide d’apprentissage de vue.js, puis de passer à la section relative aux accessoires, puis de poser une question. 

Je comprends que les composants enfants ont des scops isolés et que nous utilisons la configuration des accessoires pour transmettre les données du parent, mais lorsque je l’essaye, je ne peux pas le faire fonctionner. 

J'ai l'exemple sur lequel je travaille sur js fiddle :

var vm = new Vue({
   el: '#app',
   // data from my parent that I want to pass to the child component
   data:{
       greeting: 'hi'
   },
   components:{
        'person-container':{

            // passing in the 'greeting' property from the parent to the child component
            props:['greeting'],

            // setting data locally for the child
            data: function (){
                return { name: 'Chris' };
            },

            // using both local and parent data in the child's template
            template: '<div> {{ greeting }}, {{ name }}</div>'
        }
   }
});

Lorsque je lance le code ci-dessus, ma sortie est uniquement:

Chris

Les données locales du composant enfant affichent un rendu correct, mais les données transmises par le parent ne parviennent pas ou ne sont pas restituées correctement.

Je ne vois aucune erreur dans la console javascript et le modèle est rendu. 

Est-ce que je comprends mal comment les accessoires sont supposés être passés?

javascriptvue.js
14
Chris Schmitz

Vous devez lier la valeur au composant prop comme ceci:

<person-container v-bind:greeting="greeting"></person-container>

Jsfiddle https://jsfiddle.net/y8b6xr67/

A répondu ici: Vue JS rc-1 Transmission de données via des accessoires ne fonctionnant pas

19
Ric0

J'ai mis à jour votre violon 

<person-container :greeting="greeting"></person-container>

Vous devez transmettre les accessoires du parent à l'enfant sur le composant HTML.

5
Christophe

Vous pouvez également passer n'importe quelle chaîne à "saluer" en la définissant simplement comme un attribut HTML normal, sans utiliser la directive v-bind.

<person-container greeting="hi"></person-container>

Travaillera également. Notez que tout ce que vous passez de cette façon sera interprété comme une chaîne simple.

<person-container greeting="2 + 2"></person-container>

Cela donnera "2 + 2, Chris".
Plus d’informations dans le guide d’utilisation: https://vuejs.org/v2/guide/components.html#Props

1
Rob