La méthode de passage de valeur de composant dans Vue3

Il existe quelques différences entre la méthode de transmission de la valeur des composants dans Vue3 et Vue2, principalement parce que Vue3 adopte la nouvelle API de composition.

1. Valeur de passage des accessoires

La méthode d'utilisation de Props pour transmettre des données est la même que Vue2, l'exemple est le suivant :

// 父组件
<template>
  <child :msg="message"></child>
</template>

<script>
import Child from './Child.vue'

export default {
    
    
  components: {
    
     Child },
  data() {
    
    
    return {
    
    
      message: 'Hello Vue 3!',
    }
  },
}
</script>

// 子组件
<template>
  <div>{
    
    {
    
     msg }}</div>
</template>

<script>
export default {
    
    
  props: {
    
    
    msg: {
    
    
      type: String,
      required: true,
    },
  },
}
</script>

2. Émettre la valeur de passage

La méthode d'utilisation de Emit pour transmettre des événements est différente de la méthode d'émission dans Vue2 $La\; méthoded\text{'}émissionest\; différente,\; puisqu\text{'}iln\text{'}y\; a\; pas\; de\; méthode\; d\text{'}émission\; dansVue3$ , il est nécessaire de passer l'événement en combinant les fonctions provide et inject fournies dans l'api$.$

composant parent :

<template>
  <child @increase="increment"></child>
</template>

<script>
import {
    
     ref } from 'vue'
import Child from './Child.vue'

export default {
    
    
  components: {
    
     Child },
  setup() {
    
    
    const count = ref(0)
    const increment = () => {
    
    
      count.value++
    }
    return {
    
    
      count,
      increment,
    }
  },
}
</script>

Sous-ensemble :

<template>
  <button @click="increase">{
    
    {
    
     count }}</button>
</template>

<script>
import {
    
     inject } from 'vue'

export default {
    
    
  setup() {
    
    
    const increase = () => {
    
    
      // 通过provide/inject实现事件传递
      inject('increase')()
    }
    return {
    
    
      increase,
    }
  },
}
</script>

L'utilisation de provide/inject pour coopérer avec la livraison d'événements nécessite de fournir une fonction dans le composant parent, puis d'utiliser inject dans le composant enfant pour obtenir la fonction transmise par le composant parent, le déclenchement de la fonction dans le composant enfant peut déclencher l'événement dans le parent composant.

On peut voir que le transfert de valeur de composant dans Vue3 utilise la nouvelle API de composition pour réaliser le transfert de données via fournir/injecter, et fournit également une méthode de développement plus concise, flexible et efficace.