Kommunikation zwischen untergeordneten Vue-Komponenten und übergeordneten Komponenten (mit Code)

1. Umgebungseinrichtung

• 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

2. Übergeordnete Komponente übergibt Wert an untergeordnete Komponente

• 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: &#39;child&#39;,
    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 &#39;@/components/common/Child&#39;
export default {
  name: &#39;home&#39;,
  components: {
    HomeChild
  },
  data () {
    return {
      c:[1,2,3]
    }
  }
}
</script>

<style scoped>

</style>

Ergebnis

3. Die untergeordnete Komponente übergibt den Wert an die übergeordnete Komponente

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: &#39;child&#39;,
    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 &#39;@/components/common/Child&#39;
export default {
  name: &#39;Home&#39;,
  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)

Detaillierte Erläuterung der Kommunikation zwischen untergeordneter Vue-Komponente und übergeordneter Komponente

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!