Maison > Article > interface Web > Explication détaillée de la communication entre le parent et l'enfant des composants Vue

Explication détaillée de la communication entre le parent et l'enfant des composants Vue

小云云original: 2017-12-23 11:47:041573parcourir

Cet article présente principalement en détail les informations pertinentes sur la communication entre le père et le fils du composant Vue. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

3. Communication entre composants ($parent $refs)

Si le composant parent souhaite obtenir les données du composant enfant :

①Dans Lors de l'appel du composant enfant, spécifiez l'attribut ref

eb1a5c937f0039c5b61d148db634d15f53b801b01e70268453ed301cb998e90c

② Rechercher l'objet instance du composant enfant en fonction du nom de la référence spécifiée

this.$refs.mySon

Si le composant enfant souhaite récupérez les données du composant parent :

① Lisez directement
this.$parent
Récupérez les données du composant enfant via this.$refs

Code :

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>组件间通信-01</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
    <p>{{msg}}</p>
    <dahua></dahua>
  </p>
  <script>
  //vue提供的ref
    Vue.component("dahua",{
      data:function(){
        return{
          mySonName:""
        }
      },
      methods:{
      //通过$refs拿到指定的所引用的对应的组件的实例对象
        getSonName:function(){
          this.mySonName = this.$refs.mySon.name;
        }
      },
      template:`
        <p>
          <h1>这是父组件</h1>
          <button @click = "getSonName">获取子组件数据</button>
          <span>{{mySonName}}</span>
          <hr>
          <xiaohua ref="mySon"></xiaohua>
        </p>
      `
    })
//  创建子组件
    Vue.component("xiaohua",{
      data:function(){
        return{
          name:"小花"
        }
      },
      template:`
          <h1>这是子组件</h1>
      `
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

Le composant enfant obtient les données du composant parent via $parent

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>组件间通信-02</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
    <p>{{msg}}</p>
    <dahua></dahua>
  </p>
  <script>
    //创建子组件
    Vue.component("dahua",{
      data:function(){
        return{
          myName:"大花"
        }
      },
      template:`
        <p>
          <h1>这是父组件</h1>
          <hr>
          <xiaohua></xiaohua>
        </p>
      `
    })
    //创建子组件
    Vue.component("xiaohua",{
      data:function(){
        return{
          msg:""
        }
      },
      template:`
        <p>
            <h1>这是子组件</h1>
            <p>{{msg}}</p>
        </p>
      `,
      created:function(){
        //在子组件创建完成时获取父组件的数据
        //保存在msg中在p标签中显示
          this.msg = this.$parent.myName;
      }
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

Recommandations associées :

PHP gère le problème de sélection de niveau parent-enfant

liaison de données du composant parent-enfant React.js réelle -affichage d'un exemple de communication temporelle

Liste parent-enfant Idées de solutions pour la méthode de tri des tableaux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemples détaillés de nouvelles méthodes de tableau dans ES6Article suivant：Exemples détaillés de nouvelles méthodes de tableau dans ES6

Articles Liés

Voir plus