Detaillierte Erläuterung der Funktionsweise von $emit und $on Eltern-Kind-Geschwisterkomponenten in Vue

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Funktionsweise von $emit und $on Parent-Child- und Geschwisterkomponenten in Vue geben. Was sind die Vorsichtsmaßnahmen für die Funktionsweise von $emit und $on Parent? -Kind- und Geschwisterkomponenten in Vue Das Folgende ist ein praktischer Fall.

Es gibt drei Hauptübertragungsmethoden:

1. Kommunikation von übergeordneter Komponente zu untergeordneter Komponente

3 zwischen Geschwisterkomponenten

1. Übergeordnete Komponente übergibt Werte an untergeordnete Komponenten Übergeordnete Komponente übergibt Werte mithilfe von Requisiten an untergeordnete Komponenten

//父组件：parent.vue
<template>
  <p>
    <child :vals = "msg"></child>
  </p>
</template>
<script>
import child from "./child";
export default {
  data(){
    return {
      msg:"我是父组件的数据，将传给子组件"
    }
  },
  components:{
    child
  }
}
</script>
//子组件：child.vue
<template>
  <p>
    {{vals}}
  </p>
</template>
<script>
export default {
   props:{ //父组件传值 可以是一个数组，对象
    vals:{
      type:String,//类型为字符窜
     default:"123" //可以设置默认值
    }
  },
}
</script>

2. Kommunikation von der untergeordneten Komponente zur übergeordneten Komponente

Verwenden Sie

, um das

Ereignis $emit(eventname,option) auszulösen, Parameter 1: Benutzerdefinierter Ereignisname, Schreibmethode , Kleinbuchstaben oder verbunden mit -, wie z. B. Ereignis, Ereignisname kann nicht in Kamel-Schreibweise geschrieben werden (Ereignisname)

Die untergeordnete Komponente übergibt den Wert an die übergeordnete Komponente. Sie können $emit verwenden, um den Ereigniswert auszulösen in der untergeordneten Komponente und geben Sie sie weiter, die übergeordnete Komponente erhält Daten durch Ereignisüberwachung

Hier gibt es jedoch ein Problem:

1 Es ist die untergeordnete Komponente, an die aktiv Daten übertragen werden die übergeordnete Komponente, und die übergeordnete Komponente hört zu und empfängt sie (wird von der untergeordneten Komponente gesteuert) Bestimmen Sie, wann der Wert übergeben werden soll)

2. Oder verwenden Sie die übergeordnete Komponente, um zu entscheiden, wann die untergeordnete Komponente den Wert an übergeben soll übergeordnete Komponente und überwachen Sie dann den Empfang (die Operation in der übergeordneten Komponente bestimmt, wann der Wert übergeben werden soll)

Beide Fälle existieren2.1 : Das $meit-Ereignis wird ausgelöst und das benutzerdefinierte Ereignis $emit wird durch das Ereignis innerhalb der Unterkomponente ausgelöst

2.2: Das $meit-Ereignis wird ausgelöst und das benutzerdefinierte Ereignis $emit

kann durch das Ereignis ausgelöst werden, dass die übergeordnete Komponente die untergeordnete Komponente bedient (ref). Der erste Fall:

//父组件：parent.vue
<template>
  <p>
    <child v-on:childevent=&#39;wathChildEvent&#39;></child>
    <p>子组件的数据为：{{msg}}</p>
  </p>
</template>
<script>
import child from "./child";
export default {
  data(){
    return{
      msg:""
    }
  },
  components:{
    child
  },
  methods:{
    wathChildEvent:function(vals){//直接监听 又子组件触发的事件，参数为子组件的传来的数据
      console.log(vals);//结果：这是子组件的数据，将有子组件操作触发传给父组件
      this.msg = vlas;
    } 
  }
}
</script>
//子组件：child.vue
<template>
  <p>
    <input type="button" value="子组件触发" @click="target">
  </p>
</template>
<script>
export default {
  data(){
      return {
      texts:'这是子组件的数据，将有子组件操作触发传给父组件'
      }
  },
  methods:{
    target:function(){ //有子组件的事件触发 自定义事件childevent
      this.$emit('childevent',this.texts);//触发一个在子组件中声明的事件 childEvnet
    }
  },
}
</script>

Zweiter Fall:

//父组件：parent.vue
<template>
  <p>
    <child v-on:childevent=&#39;wathChildEvent&#39; ref="childcomp"></child>
    <input type="button" @click="parentEnvet" value="父组件触发" />
    <p>子组件的数据为：{{msg}}</p>
  </p>
</template>
<script>
import child from "./child";
export default {
  data(){
    return{
      msg:""
    }
  },
  components:{
    child
  },
  methods:{
    wathChildEvent:function(vals){//直接监听 又子组件触发的事件，参数为子组件的传来的数据
      console.log(vals);//这是子组件的数据，将有子组件操作触发传给父组件
      this.msg = vlas;
    },
    parentEnvet:function(){
      this.$refs['childcomp'].target(); //通过refs属性获取子组件实例，又父组件操作子组件的方法触发事件$meit
    }
  }
}
</script>
//子组件：child.vue
<template>
  <p>
   <!-- dothing..... -->
  </p>
</template>
<script>
export default {
  data(){
      return {
      texts:'这是子组件的数据，将有子组件操作触发传给父组件'
      }
  },
  methods:{
    target:function(){ //又子组件的事件触发 自定义事件childevent
      this.$emit('childevent',this.texts);//触发一个在子组件中声明的事件 childEvnet
    }
  },
}
</script>

Beim Vergleich der beiden Situationen liegt der Unterschied darin, ob das benutzerdefinierte Ereignis $emit von einer übergeordneten Komponente oder einer untergeordneten Komponente ausgelöst wird.

Erstens: Die erste besteht darin, ein Klickereignis in der untergeordneten Komponente zu definieren, um das benutzerdefinierte Ereignis auszulösen $ emittieren und dann in der übergeordneten Komponente abhören

Die zweite besteht darin, das erste Klickereignis in der übergeordneten Komponente in der Komponente zu erstellen. Holen Sie sich die Instanzmethode über Refs, um das Ereignis direkt auszulösen, und hören Sie dann zu in der übergeordneten Komponente

3. Kommunikation zwischen Geschwisterkomponenten

(1), Daten zwischen Brüdern durch Ereignisse übertragen

(2) Erstellen Sie eine neue Vue-Instanz, damit alle Brüder können denselben Ereignismechanismus verwenden. (Wichtige Punkte)

(3) Bei der Übergabe von Daten wird $emit (Methodenname, übergebene Daten) durch Ereignisse ausgelöst.

(4) Die datenempfangende Partei löst das Ereignis $on (Methodenname, Rückruf (empfangene Daten)) in der Hook-Funktion „mounten“ (montierte Instanz) aus. Dies ändert sich zu diesem Zeitpunkt in der Rückruffunktion wurden für die Verwendung von Pfeilfunktionen entwickelt.

//建立一个空的Vue实例,将通信事件挂载在该实例上
//emptyVue.js
import Vue from 'vue'
export default new Vue()
//兄弟组件a:childa.vue
<template>
  <p>
    <span>A组件->{{msg}}</span>
    <input type="button" value="把a组件数据传给b" @click ="send">
  </p>
</template>
<script>
import vmson from "./emptyVue"
export default {
  data(){
    return {
      msg:"我是a组件的数据"
    }
  },
  methods:{
    send:function(){
      vmson.$emit("aevent",this.msg)
    }
  }
}
</script>
//兄弟组件b:childb.vue
<template>
   <p>
    <span>b组件,a传的的数据为->{{msg}}</span>
  </p>
</template>
<script>
import vmson from "./emptyVue"
export default {
 data(){
    return {
      msg:""
    }
  },
  mounted(){
    vmson.$on("aevent",(val)=>{//监听事件aevent，回调函数要使用箭头函数;
      console.log(val);//打印结果：我是a组件的数据
      this.msg = val;
    })
  }
}
</script>
//父组件：parent.vue
<template>
  <p>
    <childa><childa>
    <childb></childb>
  </p>
</template>
<script>
import childa from "./childa";
import childb from "./childb";
export default {
  data(){
    return{
      msg:""
    }
  },
  components:{
    childa,
    childb
  },
}
</script>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung von less in Angular 6

jQuery zur Erzielung eines nahtlosen Karussells und Schritte zum Links- und Rechtsklick. Detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Funktionsweise von $emit und $on Eltern-Kind-Geschwisterkomponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!