Häufig verwendete Komponentenkommunikationsmethoden in Vue-View.js-php.cn

Häufig verwendete Komponentenkommunikationsmethoden in Vue

醉折花枝作酒筹

Freigeben： 2021-04-22 09:39:53

nach vorne

2654 Leute haben es durchsucht

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die häufig verwendeten Komponentenkommunikationsmethoden von Vue. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Häufig verwendete Komponentenkommunikationsmethoden in Vue

Das Grundmuster der Kommunikation: Die Beziehung zwischen übergeordneten und untergeordneten Komponenten lässt sich so zusammenfassen, dass Requisiten nach unten und Ereignisse nach oben weitergegeben werden. Die übergeordnete Komponente sendet Daten über Requisiten an die untergeordnete Komponente, und die untergeordnete Komponente sendet über Ereignisse Nachrichten an die übergeordnete Komponente

Häufig verwendete Komponentenkommunikationsmethoden in Vue
Drei gängige Arten der Komponentenkommunikation

1.props (übergeordnete Komponente übergibt Wert an untergeordnete Komponente)

übergeordnete Komponente Abonnement

bus.js

 <template>
  <p>
    <parent-child :childName="childName"></parent-child>
  </p>
</template>

<script>
  import child from "./child"
  export default {
    components: {
      "parent-child" : child
    },data(){
      return {
        childName : "我是child哦"
      }
    }
  }
</script>

Nach dem Login kopieren

main.js

<template>
  <p id="child">
    child的名字叫:{{childName}}<br>
  </p>
</template>

<script>
  export default {
    props:{
      childName :{
        type:String,
        default: ""
      }
    }
  }
</script>

Nach dem Login kopieren

child.vue

<template>
  <p>
    <parent-child :childName="childName" @childNotify="childReceive"></parent-child>
  </p>
</template>

<script>
  import child from "./child"
  export default {
    components: {
      "parent-child" : child
    },data(){
      return {
        childName : "我是child哦"
      }
    },methods:{
      childReceive(params){
        this.$message(params)
      }
    }
  }
</script>

Nach dem Login kopieren

child2.vue

<template>
  <p id="child">
    child的名字叫:{{childName}}<br>
  </p>
</template>

<script>
  export default {
    props:{
      childName :{
        type:String,
        default: ""
      }
    },methods:{
      childNotify(params){
        this.$emit("childNotify","child的名字叫"+this.childName);
      }
    }
  }
</script>

Nach dem Login kopieren

Empfohlenes Lernen:

vue.js Tutorial

Das obige ist der detaillierte Inhalt vonHäufig verwendete Komponentenkommunikationsmethoden in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!