Explication détaillée de la communication entre le parent et l'enfant des composants Vue-js tutoriel-php.cn

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

小云云

Libérer： 2017-12-23 11:47:04

original

1525 Les gens l'ont consulté

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

② 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>

Copier après la connexion

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>

Copier après la connexion

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!