Heim > Artikel > Web-Frontend > Kommunikation zwischen untergeordneten Vue-Komponenten und übergeordneten Komponenten (mit Code)
vue-cli herunterladen: npm install -g vue-cli
Projekt initialisieren: vue init webpack vue-demo
Geben Sie den vue-demo-Ordner ein: cd vue-demo
Abhängigkeiten herunterladen und installieren: npm install
Ausführen dieses Projekt: npm run dev
Erstellen Sie eine Komponente im Ordner src/components/. Startseite .vue
Erstellen Sie eine untergeordnete Komponente, erstellen Sie einen neuen Ordner unter dem Ordner src/components/ und erstellen Sie eine neue Komponente Child.vue
Erstellen Sie Requisiten in Child.vue, um den von der übergeordneten Komponente übergebenen Wert zu erhalten
<template> <p> <p v-for="(item,key) of c" :key="key"> {{key}}: {{item}} </p> </p> </template> <script> export default { name: 'child', props: { c: Array } } </script> <style scoped> </style>
Registrieren Sie die untergeordnete Komponente in Home.vue und fügen Sie das home-child-Tag zum p-Tag der Vorlage hinzu. Verwenden Sie das v-bind
Direktive zum Binden von c. Die untergeordnete Komponente kann den von der übergeordneten Komponente über Requisiten übergebenen Wert empfangen.
<template> <p class="hello"> <home-child v-bind:c="c"></home-child> </p> </template> <script> import HomeChild from '@/components/common/Child' export default { name: 'home', components: { HomeChild }, data () { return { c:[1,2,3] } } } </script> <style scoped> </style>
Ergebnis
Binden Sie das Klickereignis ChildClick an die Schaltfläche
in Die Funktion des Ereignisses. Verwenden Sie $emit, um ein benutzerdefiniertes Ereignis auszulösen und einen Parameter zu übergeben. Dieser Parameter ist der Wert, den die untergeordnete Komponente an die übergeordnete Komponente übergibt.
<template> <p> <p v-for="(item,key) of c" :key="key"> {{key}}: {{item}} </p> <button v-on:click="ChildClick">点击向父组件传值</button> <span>{{data}}</span> </p> </template> <script> export default { name: 'child', props: { c: Array, data: String }, methods: { ChildClick: function () { this.$emit("ListenChild","I am child.vue") } } } </script> <style scoped> </style>
Hören Sie sich das benutzerdefinierte Ereignis im Tag „home-child“ in der übergeordneten Komponente an und fügen Sie eine Methode „ShowChild“ hinzu, die auf das Ereignis reagiert.
<template> <p class="hello"> <home-child v-bind:c="c" :data="data" v-on:ListenChild="ShowChild"></home-child> </p> </template> <script> import HomeChild from '@/components/common/Child' export default { name: 'Home', components: { HomeChild }, data () { return { c:[1,2,3], data: " " } }, methods: { ShowChild: function (data) { this.data = data console.log("data:" + data) } } } </script> <style scoped> </style>
Ergebnis:
Nach dem Klicken auf die Schaltfläche:
Verwandte Artikel:
Detaillierte Erklärung von Vue-Komponenten mit Beispielen Detaillierte Erläuterung der Kommunikation zwischen untergeordneter und übergeordneter Komponente (2)
Das obige ist der detaillierte Inhalt vonKommunikation zwischen untergeordneten Vue-Komponenten und übergeordneten Komponenten (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!