Cet article vient du document officiel:
http://cn.vuejs.org/guide/components.html#props
Ce tutoriel est un tutoriel plus détaillé et plus complet compilé par l'éditeur en combinaison avec des documents officiels, ce qui convient particulièrement aux débutants.
Livraison de données d'accessoires
①Scope des instances de composants:
Il est isolé, et tout simplement, les valeurs ne sont pas partagées entre les composants, même s'il y a un attribut du même nom.
<div id = "app"> <dd> </ddd> <del> </del> </div> <cript> var vm = new Vue ({el: '#App', composants: {"add": {template: "<Futonh> btn: {{btn}} </pallat>", data: function () {return {btn: "123"}}}},}, {return {btn: "123"}}}},}, {del: {btn: "123". Template: "<fontificatrice> BTN: {{btn}} </futh>", data: function () {return {btn: "456"};}}}}}); </cript>Le résultat de rendu est:
2 boutons, le premier a une valeur de 123 et le second a une valeur de 456 (bien qu'ils soient tous deux BTN)
② Utilisez des accessoires pour lier les données statiques:
[1] Cette méthode est utilisée pour passer les chaînes et la valeur est écrite sur l'élément personnalisé du composant parent.
【2】 L'exemple suivant ne peut pas passer la valeur dans l'attribut de données du composant parent
【3】 Il écrasera la valeur du même nom dans l'attribut de données du modèle.
Exemple de code:
<div id = "app"> <add btn = "h"> </ddd> </div> <cript> var vm = new vue ({el: '#app', data: {h: "hello"}, composants: {"add": {props: ['btn'], modèle: "<bouton> bt () {btn: "123"};}}}}); </cript>Selon cette méthode d'écriture, la valeur de BTN est H, pas 123 ou bonjour.
【4】 Méthode d'écriture de chameau
Si l'interpolation est chameau,
Dans la balise HTML, comme les caractéristiques du HTML sont insensibles à la cas (comme Li et Li), les valeurs à transmettre dans la balise HTML doivent être écrites comme une ligne horizontale courte (telle que le test BTN) pour être sensible à la cas.
Dans le tableau des accessoires, il doit être cohérent avec l'interpolation et écrit comme chameau (comme BTNest).
Par exemple:
accessoires: ['btntest'], modèle: "<fontificateur> btn: {{btNest}} </futton>",Écriture correcte:
<ajouter btn-test = "h"> </ddd>
Si l'interpolation est écrite dans un type de ligne horizontal court ou que la balise HTML est écrite dans un style de chameau, elle ne prendra pas effet normalement. (Sauf si l'interpolation n'est pas écrite comme le saut de chameaux de la limite du boîtier)
③Bind les données dynamiques à l'aide d'accessoires:
Autrement dit, il s'agit de faire une certaine interpolation du composant enfant cohérent avec les données du composant parent.
La façon standard de l'écrire est (en utilisant la ligne V):
<ajouter V-Bind: la valeur du composant enfant = "Propriété du composant parent"> </ddd>
Comme code
<div id = "app"> <add V-Bind: btn = "h"> </ddd> </div> <cript> var vm = new Vue ({el: '#App', data: {h: "Hello"}, composants: {"Add": {props: ['btn'], template: "bouton> bt: {{{{bt} {return {'btn': "123"}; // La valeur du même nom du composant enfant est écrasée}}}}); </cript>illustrer:
【1】 La valeur de H dans les données du composant parent utilisées par BTN;
【2】 La valeur de retour dans la fonction des données du composant enfant est écrasée.
[3] En d'autres termes, la valeur du composant parent (en fonction du nom d'attribut) est utilisée et la valeur de l'étiquette est utilisée comme chaîne.
【4】 Il doit encore utiliser des accessoires, sinon il utilisera la valeur de BTN dans ses données
Syntaxe litérale et dynamique:
[1] En termes simples, si vous n'ajoutez pas de Vind V, vous passez une quantité littérale, c'est-à-dire que vous êtes traité comme une chaîne (par exemple, 1 est également une chaîne, pas un type de nombre);
【2】 Ajouter une ligne V, l'expression JS est transmise (de sorte que la valeur du composant parent peut être passé);
【3】 Après l'ajout de la ligne V, si la valeur du composant parent peut être trouvée, la valeur du composant parent est utilisée; S'il n'y en a pas correspondant, il est considéré comme une expression JS (par exemple, 1 + 2 est considéré comme 3, {a: 1} est considéré comme un objet);
Comme code:
<div id = "app"> <add V-Bind: btn = "1 + 2"> </ add> </div> <cript> var vm = new Vue ({el: '#App', data: {h: "Hello"}, composants: {"add": {props: ['btn'], template: "bouton> btn: {{bt} }); </cript>La valeur de BTN ici est 3 (plutôt que 1 + 2 en tant que chaîne sans ajouter en V-Bind)
⑤Props Type de liaison:
[1] Autrement dit, il est divisé en deux types, à savoir la liaison unidirectionnelle (le composant parent peut affecter le composant enfant, mais l'inverse n'est pas possible) et une liaison bidirectionnelle (le composant enfant peut également affecter le composant parent);
【2】 Exemple de liaison unidirectionnel: (par défaut ou utiliser .once)
<div id = "app"> Composant parent: <entrée v-model = "val"> <br/> composant enfant: <test V-Bind: test-val = "Val"> </ test> </div> <script> var vm = new Vue ({el: '#App', data: {Val: 1}, TEMPAENT: "Entrée:" Entrée: "Entrée:" Entrée: "Entrée:" Entrée: "Entrée:" Entrée " V-model = 'testVal' /> "}}}); </cript>illustrer:
Lorsque la valeur du composant parent est modifiée, la valeur du composant enfant change également;
Lorsque la valeur du composant enfant est modifiée, la valeur du composant parent ne changera pas. Si la valeur du composant parent est à nouveau modifiée, le composant enfant sera à nouveau synchronisé.
Il convient également de noter que si un composant enfant veut être lié de manière synchrone, l'entrée du composant enfant doit être un modèle V, et non un attribut de valeur (qui ne peut être que la liaison à un seul élément, et la liaison sera perdue après avoir modifié la valeur du composant enfant)
【3】 Liaison biféropuisée:
".Sync" est requis en tant que modificateur
Par exemple:
<div id = "app"> Composant parent: <entrée v-model = "val"> <br/> Composant enfant: <test: test.sync = "val"> </sest> </div> <prict> var vm = new vue ({el: '#app', data: {val: 1}, composants: "entrée" V-model = 'test' /> "}}}); </cript>L'effet est que quelle que soit la valeur que vous changez, l'autre changera en conséquence.
【4】 Vérification des accessoires:
En termes simples, lorsque le composant obtient des données, il est utilisé pour la vérification, et il ne sera utilisé que si les conditions se remplissent.
La méthode d'écriture consiste à transformer les accessoires en un objet, la valeur vérifiée est la clé de l'objet, et la condition de vérification est la valeur correspondant à la clé.
Par exemple:
accessoires: {test: {twoway: true}},Vérifiez que la variable de test est une liaison bidirectionnelle, et si ce n'est pas le cas, une erreur sera signalée. (Notez que cela ne peut pas être utilisé pour vérifier la liaison unidirectionnelle).
L'exemple de code est le suivant:
<div id = "app"> Composant parent: <entrée v-model = "val"> <br/> composant enfant: <test: test = "val"> </ test> </div> <cript> var vm = new Vue ({el: '#app', data: {val: 1}, components: {test: {props: {test: {twoway: true}}, TEMPAT: " V-model = 'test' /> "}}}); </cript>Pour plus de types de vérification, veuillez consulter le tutoriel officiel:
http://cn.vuejs.org/guide/components.html#prop__u9a8c_u8bc1
Ce qui précède est une explication détaillée de la portée des composants et des exemples de transfert de données d'accessoires du neuvième article de Vuejs qui vous est présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!