Heim >Web-Frontend >js-Tutorial >Detailliertes Beispiel für die Kommunikation zwischen Vue-Komponenten Detaillierte Erläuterung von untergeordneten und übergeordneten Elementen (2)

Detailliertes Beispiel für die Kommunikation zwischen Vue-Komponenten Detaillierte Erläuterung von untergeordneten und übergeordneten Elementen (2)

小云云Original: 2017-12-26 13:20:301822Durchsuche

Lernen Sie weiter mit einer detaillierten Erklärung der Kommunikation zwischen dem übergeordneten und untergeordneten Element der Vue-Komponente. Dieser Artikel stellt hauptsächlich die Informationen zur Kommunikation zwischen Kindern und Eltern zwischen Vue-Komponenten vor. Ich hoffe, dass er für alle hilfreich ist.

2. Kommunikation zwischen Komponenten (untergeordnete Komponenten übergeben Werte an übergeordnete Komponenten)

Vollständige Datenübertragung durch Ereignisse.

①Definieren Sie eine Methode in der übergeordneten Komponente, um den von der untergeordneten Komponente über das Ereignis übergebenen Wert zu empfangen

methods:{
　　recvMsg:function(msg){
　　//参数msg就是子组件通过事件出来的数据
　　}
}

②Binden Sie die Ereignisverarbeitungsfunktion

Ereignisse sind im Allgemeinen benutzerdefinierte Ereignisse

<child-component @myEvent="recvMsg"></child-component>

③Trigger-Ereignisse in untergeordneten Komponenten

　　　　　　事件名，值
this.$emit(&#39;myEvent&#39;,myPhone)
//触发一个叫做myEvent的事件，同时把第二个参数数据传递给事件对应的处理函数

Zusammenfassung:

In Vue kann die Beziehung zwischen übergeordneten und untergeordneten Komponenten wie folgt zusammengefasst werden: Requisiten unten, Ereignisse oben. Die übergeordnete Komponente leitet Daten über Requisiten an die untergeordnete Komponente weiter, und die untergeordnete Komponente sendet über Ereignisse Nachrichten an die übergeordnete Komponente.

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>组件间通信子传父</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
    <p>{{msg}}</p>
    <parent-component></parent-component>
  </p>
  <script>
    //通过事件的方式传递
    //  绑定 -- 触发
    Vue.component("parent-component",{
      data:function(){
        return {
          sonMsg:""
        }
      },
      methods:{
        //msg参数要拿子传递的值          
        recvMsg:function(msg){
          console.log("父组件接收到子组件的数据"+msg);
          this.sonMsg = msg;

        }
      },
      template:`
        <p>
          <h1>这是父组件</h1>
          <p>子组件传来的数据为：{{sonMsg}}</p>
          <hr/>
          <child-component @customEvent="recvMsg"></child-component>
        </p>
      `
    })
    Vue.component("child-component",{
      methods:{
        sendMsg:function(){
          //来触发绑定给子组件的自定义方法
          //this.$emit("customEvent");第一个参数触发
          //this.$emit("customEvent");第二个参数传值
          this.$emit("customEvent","哈哈哈哈");
        },
      },
      template:`
        <p>
          <h1>这是子组件</h1>
          <button @click="sendMsg">senToFather</button>
        </p>
      `
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

Fügen Sie eine Eingabe in die untergeordnete Komponente ein und klicken Sie auf die Schaltfläche, um den vom Benutzer eingegebenen Inhalt an die übergeordnete Komponente zu senden

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>子与父之间的通信</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
    <p>{{msg}}</p>
    <parent-component></parent-component>
  </p>
  <script>
  //创建父组件
    Vue.component("parent-component",{
    //data属性
      data:function(){
        return{
          sonMsg:""
        }
      },
      methods:{
        recvMsg:function(msg){
          this.sonMsg = msg
        }
      },
      template:`
        <p>
          <h1>父组件</h1>
          <h4>子组件传递的数据：{{sonMsg}}</h4>
          <child-component @customEvent="recvMsg"></child-component>
        </p>
      `
    })
    //创建子组件
    Vue.component("child-component",{
      data:function(){
        return {
          myInput:""
        }
      },
      methods:{
        sendMsg:function(){
          this.$emit("customEvent",this.myInput);
        }
      },
      template:`
        <p>
          <h1>子组件</h1>
          <input type="text" v-model="myInput"/>
          <button @click="sendMsg">发送</button>
        </p>
      `
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

Verwandte Empfehlungen:

Detaillierte Erläuterung der Eltern-Kind-Kommunikation in der Vue-Komponente (1)

Einführung in den Befehl v for in der Vue-Komponente und Analyse von Alarmproblemen bei der Verwendung von v-for

Beispiel für die Verwendung von Iframe-Elementen in Vue-Komponenten

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Kommunikation zwischen Vue-Komponenten Detaillierte Erläuterung von untergeordneten und übergeordneten Elementen (2). 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 Erläuterung der Eltern-Kind-Kommunikation der Vue-Komponente (1)Nächster Artikel：Detaillierte Erläuterung der Eltern-Kind-Kommunikation der Vue-Komponente (1)

In Verbindung stehende Artikel

Mehr sehen