Quelle est l'utilité d'émettre dans vue

Dans Vue, submit est utilisé par les sous-composants pour appeler les méthodes des composants parents et transmettre des données ; les sous-composants peuvent utiliser "$emit" pour déclencher des événements personnalisés des composants parents. Une fois l'événement déclenché, des paramètres supplémentaires seront transmis. au rappel de l'écouteur. La syntaxe est : "vm.$emit(event, arg)".

L'environnement d'exploitation de cet article : système Windows 10, Vue version 2.9.6, ordinateur DELL G3.

À quoi sert submit dans vue ?

Pour la définition de $emit dans vue, voir :

vm.$emit( eventName, […args] )

Paramètres :

{string} eventName

[...args]

déclenche un événement sur l'instance actuelle. Des paramètres supplémentaires sont transmis au rappel de l'auditeur.

1. Les composants parents peuvent utiliser des accessoires pour transmettre des données aux composants enfants.

2. Les composants enfants peuvent utiliser $emit pour déclencher des événements personnalisés des composants parents.

vm.$emit(event, arg) //Déclencher des événements sur l'instance actuelle

vm.$on(event, fn); //Exécuter fn après avoir écouté l'événement event

Sub composant

<template>  
  <div class="train-city">  
    <h3>父组件传给子组件的toCity:{{sendData}}</h3>   
    <br/><button @click=&#39;select(`大连`)&#39;>点击此处将‘大连’发射给父组件</button>  
  </div>  
</template>  
<script>  
  export default {  
    name:&#39;trainCity&#39;,  
    props:[&#39;sendData&#39;], // 用来接收父组件传给子组件的数据  
    methods:{  
      select(val) {  
        let data = {  
          cityname: val  
        };  
        this.$emit(&#39;showCityName&#39;,data);//select事件触发后，自动触发showCityName事件  
      }  
    }  
  }  
</script>

Parent; composant :

<template>  
    <div>父组件的toCity{{toCity}}</div>  
    <train-city @showCityName="updateCity" :sendData="toCity"></train-city>  
<template>  
<script>  
  import TrainCity from "./train-city";  
  export default {  
    name:&#39;index&#39;,  
    components: {TrainCity},  
    data () {  
      return {  
        toCity:"北京"  
      }  
    },  
    methods:{  
      updateCity(data){//触发子组件城市选择-选择城市的事件  
        this.toCity = data.cityname;//改变了父组件的值  
        console.log(&#39;toCity:&#39;+this.toCity)  
      }  
    }  
  }  
</script>

【Recommandation associée : "tutoriel vue.js"】

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!