So übergeben Sie Werte zwischen Vue-Komponenten

Dieses Mal werde ich Ihnen die Wertübertragungsmethode zwischen Vue-Komponenten und die Vorsichtsmaßnahmen für die Wertübertragung zwischen Vue-Komponenten vorstellen. Das Folgende ist ein praktischer Fall . Werfen wir einen Blick darauf.

Für uns am Frontend ist das Schreiben der Schnittstelle nicht das größte Problem. In vielen Fällen müssen wir uns auf Daten konzentrieren, z. B. auf die Datenübertragung auf JS-Seiten usw. Wir müssen auch lernen vue Wissen, wie man Daten nutzt

Natürlich ist es möglich, Speicher zu verwenden, aber Caching ist nicht erforderlich. Natürlich wird empfohlen, dass wir Vuex für die Dateninteraktion verwenden, um Ihren Vue-Code flexibel und kontrollierbar zu machen und die Daten einheitlich im Status zu speichern . Mutationsänderungen dürfen nur durch Aktionen ausgelöst werden. Manchmal sind unsere Projekte jedoch nicht komplex genug, um Vuex zu erfordern. , (wir werden nicht auf das abgeschaffte vm.$dispatch eingehen) In vielen Fällen müssen wir ein Ereignis erfassen, dann können wir den Eventbus von vue verwenden

Die Methode zur Verwendung von Eventbus ist sehr einfach. Der erste Schritt besteht darin, einen Container zu erstellen, der als unser Eventbus fungiert Im zweiten Schritt müssen wir unser Event werfen oder einreichen

Der dritte Schritt besteht darin, unsere Veranstaltung zu überwachen (vielleicht ist dies der zweite Teil)

Zuerst müssen wir unseren Eventbus global definieren

Hier definieren wir Eventbus. Damit ist unser erster Schritt einfach abgeschlossen. Ich denke, Sie sollten wissen, wo sie definiert sind

Dann werfen wir zuerst dieses Ereignis und verwenden ￥. an „Senden“ senden

Wie auch immer, das ist verständlich. Als nächstes gehen wir den dritten Schritt zur Überwachung durch

sicherlich. Hier bereits überwacht. Das Click-Event ist einfach eine Belastung,

Als nächstes müssen wir sie in der Schnittstelle verwenden

Importieren Sie zunächst die benötigten Dateien:

Hier verwende ich zwei Dateien: transimissionone und transimissiontwo‘

Als nächstes folgt die Definition

Die zweite besteht darin,

zu verwenden Führen Sie abschließend unser Projekt aus und überprüfen Sie die Wirkung

Dies ist hauptsächlich für jedermann gedacht, daher ist der Code unten erfasst, hauptsächlich vier Dateien

transitone. vue (Datei, die Ereignisse sendet)

Gefolgt von transittwo (Zuhörer)

<template> 
  <p class="transimission1"> 
  <button @click="get">点击发送数值到eventbus中</button>  
  </p> 
   
</template> 
 
<script> 
  export default { 
    name: "transimission1", 
    methods: { 
      get: function() { 
        console.log("Aaa"); 
        eventBus.$emit('eventBusName', "hellokugou"); 
      } 
    }, 
  } 
</script> 
<style> 
</style>

Als nächstes kommt unser Hub. App. Verwenden Sie

<template> 
  <p class="transimissiontwo"> 
    <button @click="method1">点击console.log出eventbus的信息 
</button> 
  </p> 
</template> 
 
<script> 
  export default { 
    name: "transimissiontwo", 
    methods: { 
      method1: function() { 
        //使用on老监听事件 
        eventBus.$on('eventBusName', function(val) {  
          console.log("这个是用transimissiontwo的val值为："+val) 
        }) 
      } 
    } 
  } 
</script> 
<style> 
 
</style>

in Vue Bitte ignorieren Sie den nutzlosen Code. Der nächste Schritt besteht darin, Eventbus zu definieren

<template> 
  <p id="app"> 
    <click></click> 
  <transimissiontwo></transimissiontwo> 
    <transimissionone></transimissionone> 
  <sendparent @listenertochildevent="getmessagefromchild"></sendparent> 
    <value :locallogo="netlogo"></value> 
    <!--无法监听，说明要在那个组件中--> 
    <button @listenertochildevent="getmessagefromchild">测试能否监听</button> 
    <my_plug_in></my_plug_in> 
    <p class="choose_p"> 
      <ul> 
        <li> 
          <router-link to="/foo">foo页面</router-link> 
        </li> 
        <li> 
          <router-link to="/header">header页面</router-link> 
        </li> 
        <li> 
          <router-link to="/hello">hello页面</router-link> 
        </li> 
        <li style="clear: both;list-style: none;"></li> 
      </ul> 
    </p> 
    <p class="main"> 
      <router-view class="my_router_iew"></router-view> 
    </p> 
    <testmintui></testmintui> 
  </p> 
</template> 
 
<script> 
  import value from './components/value' 
  import click from "./components/click" 
  import my_plug_in from "./components/plug_in" 
  import sendparent from "./components/send_parent" 
  import testmintui from "./components/Test_mint-ui" 
  import transimissiontwo from "./components/transimissiontwo" 
  import transimissionone from "./components/transimissionone" 
  export default { 
    name: 'app', 
    data() { 
      return { 
        netlogo: "主页显示信息到组件中" 
      } 
    }, 
    components: { 
      value, 
      click, 
      my_plug_in, 
      sendparent, 
      testmintui, 
      transimissionone, 
    transimissiontwo, 
     
    }, 
    methods: { 
      getmessagefromchild: function(data) { 
        console.log(data); 
      } 
    } 
  } 
</script> 
<style> 
  body { 
    background-color: #f8f8ff; 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
    color: #2c3e50; 
  } 
  ul { 
    width: 12rem; 
  } 
  ul li { 
    list-style: none; 
  } 
  ul li:not(:last-child) { 
    list-style: none; 
    width: 2rem; 
    margin-left: 0.1rem; 
    margin-right: 0.1rem; 
    float: left; 
    text-align: center; 
    background: #2C3E50; 
    color: white; 
  }    
  ul li a { 
    text-decoration: none; 
    font-size: 16px; 
    color: white; 
    line-height: 1rem; 
    text-align: center; 
  } 
  ul li:nth-child { 
    list-style: none; 
    clear: both; 
  } 
  .choose_p { 
    width: 100%; 
    overflow: scroll; 
  } 
</style>

Das ist alles, es ist ganz einfach

window.eventBus = new Vue();

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Angular4 implementiert den 3D-Effekt

AngularJS implementiert die Schritte zur Auswahl des Dropdown-Menüs für sekundäre Verknüpfungen in Detail

Das obige ist der detaillierte Inhalt vonSo übergeben Sie Werte zwischen Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!