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

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

小云云

Freigeben： 2017-12-26 13:20:30

Original

1819 Leute haben es durchsucht

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就是子组件通过事件出来的数据
　　}
}

Nach dem Login kopieren

②Binden Sie die Ereignisverarbeitungsfunktion

Ereignisse sind im Allgemeinen benutzerdefinierte Ereignisse

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

Nach dem Login kopieren

③Trigger-Ereignisse in untergeordneten Komponenten

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!