Cet article est un tutoriel plus détaillé et complet compilé par l'éditeur en combinaison avec des documents officiels. Il est très bon et est plus adapté aux débutants à lire.
Cet article vient du document officiel:
http://cn.vuejs.org/guide/components.html#u7236_u5b50_u7ec4_u4ef6_u901a_u4fe1
Communication des composants parent-enfant
① Accédez aux composants enfants, aux composants parents et aux composants racinaires;
this. $ Parent Access composant parent
Cet. $ Les enfants accèdent aux composants enfants (est un tableau)
Ce. $ Root le descendant de l'instance racine accède à l'instance racine
Exemple de code:
<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'], template: "<fort @ keyup = ' V-model = 'test' /> ", méthodes: {findparent: function () {console.log (this. $ parent); // accéder au composant racine console.log (this. $ parent.val); // Vérifiez si le composant parent et le composant racine sont congruents (car son composant parent est le composant racine)}}}}}}); </cript>Lorsque les touches apparaissent dans la zone d'entrée du sous-composant, le contenu affiché est:
La valeur de la zone d'entrée du composant parent et du composant parent (la valeur par défaut est 1), 0 (représente qu'il est le premier élément de l'attribut enfant du composant parent), et vrai (parce que le composant parent est le composant racine, il est congruent);
De cette façon, l'interaction peut être effectuée dans l'arborescence des composants.
② événements personnalisés:
Tout d'abord, les événements doivent être placés dans la propriété des événements plutôt que dans la propriété Methods (une erreur que les novices sont susceptibles de faire). Ils ne peuvent déclencher des événements que dans la propriété des événements, tandis que les événements de la propriété Methods ne peuvent pas être déclenchés.
Deuxièmement, il y a une différence entre la distribution ascendante et la diffusion à la baisse: la distribution ascendante déclenchera un événement du même nom, tandis que la diffusion à la baisse ne le fera pas;
Troisièmement, la distribution à la hausse et la diffusion à la baisse ne déclencheront que les événements pour les lignes directes (enfants ou parents, à l'exclusion des ancêtres et des petits-enfants), et se poursuivra sur cette ligne à moins que la valeur de retour de l'événement ne soit vraie.
Quatrièmement, l'événement ne peut pas être appelé explicitement à travers cela. Nom de l'événement.
Exemple de code:
<div id="app"> Parent component: <button @click="parentClick">Click to propagate broadcast down</button> <br/> Child component 1: <children1></children1> <br/> Another child component 1: <another-children1></another-children1> </div> <script> var vm = new Vue({ el: '#app', data: { val: 1 }, methods: { parentClick: function () {ce. Valeur et ne continuera pas à être distribués d'accessoires: ['test'], modèle: "<fontificatrices> Enfants1 </button> </br> sous-composant 2: <filans2> </filom2>", Events: {ChildRenclick: function () {console.log ("childrenclick-children1"); console.log ("Message:" + msg);}}, composants: {enfants: {accessoires: ['test'], modèle: "button @ click = 'findparent'> Enfants-Click </ Button>", Methods: {findparent: function () {ce. Console.log ("ChildRenclick-ChildRend2");}, parentClick: fonction (msg) {console.log ("MSG); Composants du composant enfant: ['test'], modèle: "Button> AnotherChildrens1 </frutch> </br> Un autre composant enfant 2: <Another-childrend2> </nom-childrend2>", événements: {childrenclick: function () {console.log (childrenclick console.log ("parentClick-anotherchildren1"); Ceci. }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}, }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}, }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}, }}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}illustrer:
【1】 Cliquez sur le bouton du composant parent, et il diffusera vers le bas, puis déclenchera le composant enfant 1 lui-même, un autre composant enfant 1 et un autre composant enfant 2;
【2】 Cliquez sur le bouton du composant enfant 2 déclenchera l'événement du composant enfant 2 et l'événement du composant enfant 1, mais ne déclenchera pas le bouton du composant parent;
【3】 Cliquez sur le bouton d'un autre composant enfant 2 déclenchera l'événement d'un autre composant enfant 2, l'événement d'un autre composant enfant 1 et l'événement du composant parent (car la valeur de retour de l'événement d'un autre composant enfant 1 est vraie);
③ Utilisez V-on pour lier les événements personnalisés:
[1] Autrement dit, lorsqu'un composant enfant déclenche un événement (la méthode des événements), le composant parent exécutera également une méthode (la méthode dans les méthodes des composants parent).
[2] La liaison déclenchée est écrite dans le modèle (c'est-à-dire le modèle de modèle qui est remplacé). Plusieurs composants enfants peuvent se lier à une méthode de composant parent, ou différents composants enfants peuvent se lier à une méthode de composante parent différente, mais le même événement de composant enfant ne peut pas lier une méthode.
【3】 Le composant enfant envoie des paramètres pour le passage du message. Même si l'événement du composant enfant n'a pas de paramètres, cela n'affecte pas la méthode de transmission des paramètres au composant parent (c'est-à-dire que la méthode du composant parent peut accepter les paramètres obtenus par la méthode du composant enfant)
Par exemple:
<div id = "app"> Composant parent: <fontificateur> Cliquez sur pour propager la diffusion </button> <br/> Composant de l'enfant 1: <! - La liaison est écrite ici. Les liaisons multiples peuvent être liées à la même, ou différentes liaisons sont différentes, mais plusieurs ne peuvent pas être liés à un -> <enfants v-on: test = "parent" @ test2 = "Another"> </Div> </div> <script> var vm = new Vue ({el: '#App', data: {Val: 1}, méthodes: {Parent: fonction (arg) {console.log (arg); consolent. événement ");}, un autre: function () {console.log (" une autre méthode ");}}, composants: {enfants: {// Cela n'a pas de valeur de retour et ne continuera pas d'être distribué des accessoires: ['test'], Template:" <Button @ click = 'childclick'> Enfants1 </ Button> </br> <bouton @ click = 'childclick2'> Enfants1 </ Button> "Button: @ click = 'childclick2'> ChildClick: fonction () {this. $ émit (test ", 'L'argument pour la répartition');}, childclick2: function () {this. $ emit (" test2 "); }); </cript>④ Index du sous-composant
Autrement dit: vous pouvez obtenir directement des sous-composants à partir de l'index, puis vous pouvez appeler les méthodes de chaque sous-composant.
La méthode pour ajouter l'index est: ajouter V-Ref à la balise: nom d'index
La méthode d'appel du composant est: vm. $ Ref. Nom d'index
Vous pouvez également l'utiliser. $ Ref. Nom d'index directement dans le composant parent
Pour le moment, vous pouvez obtenir le composant, puis le composant peut appeler ses méthodes ou utiliser ses données.
Exemple de code:
<div id = "app"> Composant parent: <bouton @ click = "todo"> Événements déclenchant le composant enfant </futton> <br/> sous-composant 1: <! - La liaison est écrite ici. Plusieurs liaisons peuvent être liées à la même, ou différentes liaisons sont différentes, mais plusieurs ne peuvent pas être liés à un -> <Enfants V-Ref: Child> </fgends> </div> <script> var vm = new Vue ({el: '#App', Methods: {too: function () {this. $ Refs.child.frombarent (); // appelle les enfants de l'enfant de la méthode PARENT à travers l'index},},},},}. ? </cript>Ce qui précède est l'article Vuejs 10e communication de composants parent-enfant Vuejs qui vous est présenté. 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!