Explication détaillée du fonctionnement des composants frères et sœurs $emit et $on dans vue

Cette fois, je vais vous apporter une explication détaillée du fonctionnement des composants $emit et $on parent-enfant et frère dans Vue Quelles sont les précautions pour le fonctionnement de $emit et $on parent. -composants enfants et frères et sœurs dans Vue Ce qui suit est un cas pratique.

Il existe trois méthodes de transmission principales :

1. Communication entre le composant parent et le composant enfant

2. Communication entre le composant enfant et le composant parent

3. entre les composants frères

1. Le composant parent transmet les valeurs aux composants enfants

Le composant parent transmet les valeurs aux composants enfants à l'aide d'accessoires

//父组件：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. Communication du composant enfant au composant parent

Utilisez $emit(eventname,option) pour déclencher événement ,

Paramètre 1 : Nom de l'événement personnalisé, écrit en minuscules ou connecté avec -, comme event, le nom de l'événement ne peut pas être écrit en chameau (eventName)

Le sous-composant transmet la valeur au composant parent, et vous pouvez utiliser $emit pour Déclenchez la valeur de l'événement dans le sous-composant. , le composant parent obtient des données via la surveillance des événements

Cependant, il y a un problème ici,

1 C'est le composant enfant qui transmet activement les données. au composant parent, et le composant parent l'écoute et le reçoit (par le composant enfant L'opération dans le composant parent détermine quand transmettre la valeur)

2. Ou utilisez le composant parent pour déterminer quand le composant enfant transmettra la valeur au composant parent, puis surveillera et recevra (l'opération dans le composant parent détermine quand transmettre la valeur)

Les deux cas sont disponibles

2.1 : l'événement $meit est déclenché et l'événement personnalisé $emit

2.2 : l'événement $meit est déclenché. peut être déclenché en opérant l'événement du composant enfant (ref) via le composant parent

Le premier cas :

//父组件：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>

Deuxième cas :

//父组件：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>

En comparant les deux situations, la différence réside dans le fait que l'événement personnalisé $emit est déclenché par un composant parent ou un composant enfant

La première est de définir un clic événement dans le composant enfant pour déclencher l'événement personnalisé $emit, puis écoutez-le dans le composant parent

La seconde consiste à d'abord dans le composant parent cliquer sur l'événement, obtenir la méthode d'instance via les références dans le composant pour déclencher directement l'événement, puis écouter dans le composant parent

3. Communication entre composants frères et sœurs

(1), entre frères Transmettre les données via les événements

(2) Créez une nouvelle instance Vue afin que tous les frères puissent partager le même mécanisme d'événements. (Points clés)

(3) Lors de la transmission de données, $emit (nom de la méthode, données transmises) est déclenché par des événements.

(4) La partie réceptrice des données déclenche l'événement $on (nom de la méthode, rappel (données reçues)) dans la fonction hook montée() (instance montée). À ce stade, cela change dans la fonction de rappel. ont été conçus pour utiliser les fonctions fléchées.

//建立一个空的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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes à utiliser moins dans Angular 6

jQuery pour obtenir un carrousel transparent et étapes de clic gauche et droit Explication détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!