Comprendre les accessoires dans vue.js
Je travaille dans le guide pour l'apprentissage vue.js, arrivé à la section sur les accessoires, et a couru dans une question.
Je comprends que les composants enfants ont isolé des scops et nous d'utiliser les accessoires de configuration pour transmettre des données par le parent, mais quand j'ai essayer je ne peux pas le faire fonctionner.
J'ai l'exemple que je vais travailler 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 j'exécute le code ci-dessus, ma sortie est uniquement:
Chris
Les données locales de l'enfant composante rend bien, mais le passé des parents de données n'est pas à venir à travers, ou n'est pas correctement rendu.
Je ne vois pas d'erreurs dans la console javascript et le modèle est rendu.
Suis-je malentendu comment les accessoires sont censés être passés?
source d'informationauteur Chris Schmitz
Vous devez vous connecter pour publier un commentaire.
Vous devez lier la valeur de la composante prop comme ceci:
Jsfiddle
https://jsfiddle.net/y8b6xr67/
Répondu ici:
Vue JS rc-1 la transmission des Données Par le biais des Accessoires ne fonctionne Pas
J'ai mis à jour votre violon
Vous avez besoin pour passer des accessoires de la mère à l'enfant sur le composant html.
Vous pouvez également passer une chaîne de "salutation" juste en le définissant comme normal attribut html, sans l'utilisation de v-bind.
Fonctionnera également. Notez que tout ce que vous passer de cette façon sera interprété comme une chaîne simple.
En résulte "2 + 2, Chris".
De plus, dans le guide de l'utilisateur: https://vuejs.org/v2/guide/components.html#Props