So verwenden Sie Ereignisemitter, um Komponentendaten in Vue.js zu ändern

In diesem Artikel erfahren Sie, wie Sie Ereignisemitter verwenden, um Daten und deren Status von untergeordneten Komponenten an die übergeordnete Komponente in vue.js zu übergeben. Dieser Artikel ist für Entwickler aller Stufen geeignet, auch für Anfänger.

Bevor Sie beginnen…

Wir können uns die Methode zum Übergeben von Daten von der übergeordneten Komponente an die untergeordnete Komponente in Vue.js im Artikel „Übergeben von Daten an untergeordnete Komponenten mithilfe von Requisiten in Vue.js“ ansehen. Bevor Sie diesen Artikel lesen, sollten Sie Folgendes installiert haben:

node.js 10.x und höher. Sie können überprüfen, ob Sie dies tun, indem Sie den folgenden Befehl im Terminal/in der Eingabeaufforderung ausführen:

node -v

Code-Editor – Empfehlen Sie die neueste Version von Visual Studio
Vue, global auf Ihrem Computer installiert
Vue CLI 3.0 ist auf Ihrem Computer installiert. Deinstallieren Sie dazu zunächst die alte CLI-Version:

• npm uninstall -g vue-cli

Dann installieren Sie eine neue:

npm install -g @vue/cli

Laden Sie hier ein
• Vue-Starterprojekt herunter

Entpacken Sie das heruntergeladene Projekt
Navigieren Sie zu Öffnen Sie die entpackte Datei und führen Sie den folgenden Befehl aus, um alle Abhängigkeiten auf dem neuesten Stand zu halten:

• npm install

Übergeben Sie Daten durch die Komponente. Um den Datenwert von der übergeordneten Komponente in die Anwendungskomponente zu übergeben (z. B app.vue) an untergeordnete Komponenten (z. B. verschachtelte Komponenten) übergeben wird, stellt uns Vue.js eine Plattform namens props zur Verfügung.

Requisiten können als benutzerdefinierte Eigenschaften bezeichnet werden, die Sie in einer Komponente registrieren und die es Ihnen ermöglichen, Daten in der übergeordneten Komponente zu definieren, ihr einen Wert zuzuweisen und den Wert dann an eine Requisiteneigenschaft zu übergeben, auf die in der untergeordneten Komponente verwiesen werden kann.

Dieser Artikel zeigt Ihnen die Kehrseite dieses Prozesses. Um die Datenwerte in der übergeordneten Komponente von der untergeordneten Komponente zu übergeben und zu aktualisieren, sodass auch alle anderen verschachtelten Komponenten aktualisiert werden, verwenden wir das Emit-Konstrukt, um die Ereignisemission und Datenaktualisierungen zu verarbeiten.

Beispiel:
Sie durchlaufen den folgenden Prozess: Ausgeben von Ereignissen von untergeordneten Komponenten, Einrichten von hörenden übergeordneten Komponenten zur Weitergabe von Daten von untergeordneten Komponenten und schließlich Aktualisieren von Datenwerten.

Wenn Sie diesen Artikel von Anfang an verfolgt haben, werden Sie das

Starterprojekt

in vs-Code herunterladen und öffnen. Dieses Projekt ist zum Zeitpunkt dieses Artikels mit vollständigem Code abgeschlossen. Der Grund dafür, dass dies ein Starterprojekt ist, besteht darin, dass Sie das Requisitenkonzept ausprobieren können, bevor Sie den Inversionsprozess einführen.

StartIn diesem Ordner finden Sie zwei Unterkomponenten: test.vue und test2.vue, deren übergeordnete Komponente ist app.vue-Datei. Wir werden die Header der beiden untergeordneten Komponenten verwenden, um diese Methode zum Ausgeben von Ereignissen zu veranschaulichen. Ihre Test.vue-Datei sollte wie folgt aussehen:

<template>
  <div>
    <h1 id="Vue-nbsp-Top-nbsp-nbsp-Artists">Vue Top 20 Artists</h1>
    <ul>
      <li v-for="(artist, x) in artists" :key="x">
        <h3 id="artist-name">{{artist.name}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;,
  props: {
    artists: {
      type: Array
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li{
    height: 40px;
    width: 100%;
    padding: 15px;
    border: 1px solid saddlebrown;
    display: flex;
    justify-content: center;
    align-items: center;
  }
a {
  color: #42b983;
}
</style>

Damit die Header die Header aus der impliziten Definition im Abschnitt „Dateneigenschaften“ erhalten, erstellen Sie den Datenabschnitt und fügen Sie die Definition hinzu, dann in der Vorlage Fügen Sie die Interpolationsnotation hinzu, etwa so: test.vue和test2.vue，其父组件是app.vue文件。 我们将使用两个子组件的标题来说明此事件发出方法。 您的Test.vue文件应如下所示：

<template>
  <div>
    <h1 id="header">{{header}}</h1>
    <ul>
      <li v-for="(artist, x) in artists" :key="x">
        <h3 id="artist-name">{{artist.name}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;,
  props: {
    artists: {
      type: Array
    }
  },
  data() {
    return {
     header: &#39;Vue Top Artists&#39;
    }
  }
}
</script>

要使标题从数据属性部分中的隐式定义中接收标题，请创建数据部分并添加定义，然后在模板中添加插值符号，如下所示：

<template>
  <div>
    <h1 id="header">{{header}}</h1>
    <ul>
      <li v-for="(artist, x) in artists" :key="x">
        <h3 id="artist-name">{{artist.name}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;Test&#39;,
  props: {
    artists: {
      type: Array
    }
  },
  data() {
    return {
     header: &#39;Vue Top Artists&#39;
    }
  },
  methods: {
    callingFunction(){
      this.header = "You clicked on header 1";
    }
  }
}
</script>

如果您运行应用程序，您将得到与开始时完全相同的接口。下一步是在click

<script>
export default {
  name: &#39;Test&#39;,
  props: {
    artists: {
      type: Array
    },
    header: {
      type: String
    }
  },
  data() {
    return {
      // header: &#39;Vue Top Artists&#39;
    }
  },
  methods: {
    callingFunction(){
      // this.header = "You clicked on header 1"
      this.$emit(&#39;toggle&#39;, &#39;You clicked header 1&#39;);
    }
  }
}
</script>

Wenn Sie die Anwendung ausführen, erhalten Sie genau die gleiche Oberfläche wie beim Start. Der nächste Schritt besteht darin, diese definierte Eigenschaft per Klick zu ändern.

Titel umschalten

Um den Titel umzuschalten, müssen Sie beim Klicken einen Ereignis-Listener zum Titel hinzufügen und eine Funktion angeben, die die Logik enthält, die beim Klicken ausgeführt wird.

<template>
  <div id="app">
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
    <Test v-bind:header="header" v-on:toggle="toggleHeader($event)" />
    <Test v-bind:artists="artists" />
    <test2 v-bind:header="header"/>
    <test2 v-bind:artists="artists" />
  </div> 
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Test2 from &#39;./components/Test2&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Test2
  },
  data (){
    return {
      artists: [
       {name: &#39;Davido&#39;, genre: &#39;afrobeats&#39;, country: &#39;Nigeria&#39;},
       {name: &#39;Burna Boy&#39;, genre: &#39;afrobeats&#39;, country: &#39;Nigeria&#39;},
       {name: &#39;AKA&#39;, genre: &#39;hiphop&#39;, country: &#39;South-Africa&#39;}
      ],
      header: &#39;Vue Top Artists&#39;
    }
  },
  methods: {
    toggleHeader(x){
      this.header = x;
    }
  }
}
</script>
<style>
#app {
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Jetzt ändert sich Ihr Titel beim Klicken in die Zeichenfolge innerhalb der aufrufenden Funktion.

Emitter einrichten

In dieser Phase möchten Sie das gleiche Verhalten an die übergeordnete Komponente übergeben, sodass sich beim Klicken jeder in der übergeordneten Komponente verschachtelte Titel ändert.

Dazu erstellen Sie einen Emitter, der ein Ereignis in der untergeordneten Komponente aussendet, das die übergeordnete Komponente abhören und auf das sie reagieren kann (dies ist die gleiche Logik wie beim Ereignis-Listener der Komponente).

Ändern Sie den Skriptteil im Test. vue-Datei in den folgenden Codeblock:

<template>
  <div>
    <h1 id="header">{{header}}</h1>
    <ul>
      <li v-for="(artist, x) in artists" :key="x">
      <h3 id="artist-name-nbsp-from-nbsp-artist-country">{{artist.name}} from {{artist.country}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;Test2&#39;,
  props: {
    artists: {
      type: Array
    },
    header: {
      type: String
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li{
    height: 40px;
    width: 100%;
    padding: 15px;
    border: 1px solid saddlebrown;
    display: flex;
    justify-content: center;
    align-items: center;
  }
a {
  color: #42b983;
}
</style>

Definieren Sie hier den vom Header erwarteten Datentyp als prop. Dann gibt es innerhalb dieser Methode eine Generate-Anweisung, die Vue anweist, beim Umschalten ein Ereignis auszugeben (genau wie andere Ereignisse, z. B. ein Klickereignis) und die Zeichenfolge als Parameter übergibt. Das ist alles, was Sie brauchen, um ein Ereignis einzurichten, das in einer anderen Komponente abgehört wird.

Auf ausgegebene Ereignisse achten

Nach dem Erstellen des Ereignisses müssen Sie nun als Nächstes darauf achten und darauf reagieren. Kopieren Sie diesen Codeblock in Ihre app.vue-Datei: 🎜

<template>
  <div id="app">
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo" >
    <Test v-bind:header="header" v-on:toggle="toggleHeader($event)" />
    <Test v-bind:artists="artists" />
    <test2 v-bind:header="header"/>
    <test2 v-bind:artists="artists" />
  </div> 
</template>
<script>
import Test from &#39;./components/Test.vue&#39;
import Test2 from &#39;./components/Test2&#39;
export default {
  name: &#39;app&#39;,
  components: {
    Test, Test2
  },
  data (){
    return {
      artists: [
       {name: &#39;Davido&#39;, genre: &#39;afrobeats&#39;, country: &#39;Nigeria&#39;},
       {name: &#39;Burna Boy&#39;, genre: &#39;afrobeats&#39;, country: &#39;Nigeria&#39;},
       {name: &#39;AKA&#39;, genre: &#39;hiphop&#39;, country: &#39;South-Africa&#39;}
      ],
      header: &#39;Vue Top Artists&#39;
    }
  },
  methods: {
    toggleHeader(x){
      this.header = x;
    }
  }
}
</script>
<style>
#app {
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在模板部分，您可以看到第一个组件test上有两个vue指令。第一个是v-bind，它将initial header属性绑定到artists数组下的数据对象中的隐式定义；初始化时，将显示字符串vue top artists。

第二个指令是v-on，它用于监听事件；要监听的事件是toggle（记住，您已经在测试组件中定义了它），它的调用函数是toggleheader。此函数已创建，子组件中的字符串将通过$event参数传递到此处显示。

含义

这会将数据通过发射器传递到父组件，因此由于其他组件嵌套在父组件中，因此每个嵌套组件中的数据都会重新呈现和更新。进入test2.vue文件并将此代码块复制到其中：

<template>
  <div>
    <h1 id="header">{{header}}</h1>
    <ul>
      <li v-for="(artist, x) in artists" :key="x">
      <h3 id="artist-name-nbsp-from-nbsp-artist-country">{{artist.name}} from {{artist.country}}</h3>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;Test2&#39;,
  props: {
    artists: {
      type: Array
    },
    header: {
      type: String
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
li{
    height: 40px;
    width: 100%;
    padding: 15px;
    border: 1px solid saddlebrown;
    display: flex;
    justify-content: center;
    align-items: center;
  }
a {
  color: #42b983;
}
</style>

这里，数据插值被设置并指定为道具对象中的一个字符串。在你的开发服务器上运行应用程序:

npm run serve

可以看到，一旦事件在父组件中被响应，所有组件都会更新它们的报头，即使仅在一个子组件中指定了定义。

您可以在github上找到本教程的完整代码。

结论

您可以看到在Vue中使用事件和发射器的另一个有趣的方面:您现在可以在一个组件中创建事件，并在另一个组件中监听它并对它作出反应。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Ereignisemitter, um Komponentendaten in Vue.js zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!