Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Eltern-Kind-Kommunikation zwischen Vue-Komponenten

Detaillierte Erläuterung der Eltern-Kind-Kommunikation zwischen Vue-Komponenten

小云云Original: 2017-12-23 11:47:041598Durchsuche

Dieser Artikel stellt hauptsächlich die relevanten Informationen zur Eltern-Kind-Kommunikation zwischen Vue-Komponenten vor. Ich hoffe, dass er jedem helfen kann.

3. Kommunikation zwischen Komponenten ($parent $refs)

Wenn die übergeordnete Komponente die Daten der untergeordneten Komponente erhalten möchte:

①Geben Sie beim Aufrufen der untergeordneten Komponente das Ref-Attribut

eb1a5c937f0039c5b61d148db634d15f53b801b01e70268453ed301cb998e90c

② Suchen Sie das Instanzobjekt der untergeordneten Komponente gemäß dem Namen der angegebenen Referenz

this.$refs.mySon

Wenn die untergeordnete Komponente dies möchte Holen Sie sich die Daten der übergeordneten Komponente:

① Lesen Sie direkt
this.$parent
Erhalten Sie die Daten der untergeordneten Komponente über 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>

Die untergeordnete Komponente erhält die Daten der übergeordneten Komponente über $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>

Verwandte Empfehlungen:

PHP behandelt Auswahlprobleme auf Eltern-Kind-Ebene

react.js Datenbindung der Eltern-Kind-Komponente real Beispielanzeige für zeitbasierte Kommunikation

Eltern-Kind-Liste Lösungsideen für die Array-Sortiermethode

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Eltern-Kind-Kommunikation zwischen Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Beispiele für neue Array-Methoden in ES6Nächster Artikel：Detaillierte Beispiele für neue Array-Methoden in ES6

In Verbindung stehende Artikel

Mehr sehen