Heim  >  Artikel  >  Web-Frontend  >  Kommunikation zwischen untergeordneten Vue-Komponenten und übergeordneten Komponenten (mit Code)

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

php是最好的语言
php是最好的语言Original
2018-08-06 15:54:261881Durchsuche

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
Kommunikation zwischen untergeordneten Vue-Komponenten und übergeordneten Komponenten (mit Code)

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:
Kommunikation zwischen untergeordneten Vue-Komponenten und übergeordneten Komponenten (mit Code)

Nach dem Klicken auf die Schaltfläche:
Kommunikation zwischen untergeordneten Vue-Komponenten und übergeordneten Komponenten (mit Code)

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn