Comment utiliser le sucre syntaxique dans Vue3

composant migratoire

Le composant suivant a deux accessoires (à afficher et un drapeau). Grâce à un autre composant, calculez l'URL de l'image du poney affichée dans le modèle, en fonction de ces deux accessoires. Le composant émet également un événement lorsque l'utilisateur clique dessus. L'image sélectionnée pendant l'exécution du modèle Ponypony. Il suffit alors de conserver le contenu de la fonction : tout passe-partout peut disparaître. Vous pouvez supprimer des fonctions dans :

Pony.vue

<template>
  <figure @click="clicked()">
    <Image :src="ponyImageUrl" :alt="ponyModel.name" />
    <figcaption>{{ ponyModel.name }}</figcaption>
  </figure>
</template>
<script lang="ts">
import { computed, defineComponent, PropType } from &#39;vue&#39;;
import Image from &#39;./Image.vue&#39;;
import { PonyModel } from &#39;@/models/PonyModel&#39;;
 
export default defineComponent({
  components: { Image },
 
  props: {
    ponyModel: {
      type: Object as PropType<PonyModel>,
      required: true
    },
    isRunning: {
      type: Boolean,
      default: false
    }
  },
 
  emits: {
    selected: () => true
  },
 
  setup(props, { emit }) {
    const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? &#39;-running&#39; : &#39;&#39;}.gif`);
 
    function clicked() {
      emit(&#39;selected&#39;);
    }
 
    return { ponyImageUrl, clicked };
  }
});
</script>

setupscriptsetupdefineComponentsetupscriptimplicit return

Supprimer la déclaration de liaison de niveau supérieur à la fin et les instructions d'importation les rendent automatiquement disponibles pour une utilisation dans les modèles. Donc voilà et disponibles, pas besoin de les retourner. Lorsque l'on clique sur l'image du poney, le script reviendra.

Cette phrase peut être réécrite comme suit : "Nous pouvons simplement importer le composant et Vue reconnaîtra automatiquement son utilisation dans le modèle, il pourra donc omettre l'instruction ". composantsImagecomponents

Pony.vue

<script setup lang="ts">
import { computed, PropType } from &#39;vue&#39;;
import Image from &#39;./Image.vue&#39;;
import { PonyModel } from &#39;@/models/PonyModel&#39;;
 
components: { Image },
 
props: {
  ponyModel: {
    type: Object as PropType<PonyModel>,
    required: true
  },
  isRunning: {
    type: Boolean,
    default: false
  }
},
 
emits: {
  selected: () => true
},
 
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? &#39;-running&#39; : &#39;&#39;}.gif`);
 
function clicked() {
  emit(&#39;selected&#39;);
}
 
return { ponyImageUrl, clicked };
</script>

Nous y sommes presque : nous devons maintenant migrer les déclarations et . propsmits

defineProps

Vue fournit une aide que vous pouvez utiliser pour définir vos accessoires. Il s'agit d'un assistant de compilation (une macro), vous n'avez donc pas besoin de l'importer dans votre code. Vue reconnaît automatiquement votre composant lors de sa compilation. DefineProps

defineProps renvoie des accessoires :

<script setup lang="ts">
import { computed, PropType } from &#39;vue&#39;;
import Image from &#39;./Image.vue&#39;;
import { PonyModel } from &#39;@/models/PonyModel&#39;;
 
props: {
  ponyModel: {
    type: Object as PropType<PonyModel>,
    required: true
  },
  isRunning: {
    type: Boolean,
    default: false
  }
},
 
emits: {
  selected: () => true
},
 
const ponyImageUrl = computed(() => `/pony-${props.ponyModel.color}${props.isRunning ? &#39;-running&#39; : &#39;&#39;}.gif`);
 
function clicked() {
  emit(&#39;selected&#39;);
}
</script>

defineProps reçoit la déclaration précédente en paramètre. Mais nous pouvons faire mieux pour les utilisateurs de TypeScript ! props

defineProps est généralement typé : vous pouvez l'appeler sans paramètre, mais spécifiez une interface comme "forme" de l'accessoire. Rien de plus terrible à écrire ! Nous pouvons utiliser le type TypeScript correct et ajouter ???? pour marquer l'accessoire comme inutile. Réécrit dans un langage plus fluide : "Lorsque Object est utilisé comme type d'accessoires, dois-je spécifier un type spécifique ?"

const props = defineProps({
  ponyModel: {
    type: Object as PropType<PonyModel>,
    required: true
  },
  isRunning: {
    type: Boolean,
    default: false
  }
});

Mais nous avons perdu certaines informations. Dans les versions précédentes, nous pouvions spécifier sa valeur par défaut comme . Pour avoir le même comportement, nous pouvions utiliser l'assistant : isRunningfalsewithDefaults

const props = defineProps<{
  ponyModel: PonyModel;
  isRunning?: boolean;
}>();

La dernière syntaxe restante à migrer est celle des déclarations. émets

defineEmits

Vue fournit une aide très similaire à une aide. Cette phrase exprime déjà clairement une fonction et les opérations correspondantes, il est donc difficile de la réécrire en une seule phrase. Mais si vous devez réécrire, vous pouvez essayer les méthodes suivantes : 1. Ces fonctions sont utilisées pour définir et déclencher des événements. 2. Les fonctions définirEmits, définirProps et définirEmitsemit sont toutes liées aux événements. 3. Si vous devez définir, définir et déclencher des événements, vous pouvez utiliser les fonctions définirEmits, définirProps et définirEmitsemit. 4. Ces fonctions peuvent vous aider à gérer les événements dans Vue.js

interface Props {
  ponyModel: PonyModel;
  isRunning?: boolean;
}
 
const props = withDefaults(defineProps<Props>(), { isRunning: false });

Ou mieux encore, utilisez TypeScript :

const emit = defineEmits({
  selected: () => true
});

La déclaration complète du composant est raccourcie de 10 lignes. Pas mal pour réduire 30 lignes de composants ! Cela contribue à améliorer la lisibilité et fonctionne mieux avec TypeScript. Bien qu'il semble un peu étrange que tout soit automatiquement exposé dans le modèle, comme il n'y a pas de saut de ligne, vous vous y habituerez.

Pony.vue

const emit = defineEmits<{
  (e: &#39;selected&#39;): void;
}>();

default fermé et définirExpose

Il existe quelques différences subtiles qui distinguent les deux manières de déclarer les composants : Les composants ne sont "pas par défaut" activé". Cela signifie que les autres composants ne peuvent pas voir ce qui est défini à l'intérieur du composant. configuration du script

Par exemple, dans le chapitre suivant nous verrons qu'un composant peut accéder à un autre composant (en utilisant des références). Lorsqu'une fonction est définie comme XX, tout le contenu renvoyé par la fonction est également visible dans le composant parent YY. S'il est défini avec , le composant parent n'est pas visible. Le contenu exposé peut être sélectionné en ajoutant des assistants. Les versions publiques seront alors accessibles sous forme de fichiers . PonyImageImagedefineComponentsetupPonyImagescript setupImagedefineExpose({ clé : valeur })valuekey

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!