Un format de prix fourni


export const cleFormatPrix = Symbol("formatPrix");


<script setup>
import { inject } from "vue";
import { cleFormatPrix } from "./cles.js";

defineProps({ prix: { type: Number, required: true } });

// Valeur par défaut : un format simple, si aucun ancêtre n'en fournit
const formater = inject(cleFormatPrix, (prix) => `${prix} €`);
</script>

<template>
  <strong>{{ formater(prix) }}</strong>
</template>


<script setup>
import { provide } from "vue";
import { cleFormatPrix } from "./cles.js";

const format = new Intl.NumberFormat("fr-CH", { style: "currency", currency: "CHF" });
provide(cleFormatPrix, (prix) => format.format(prix));
</script>

<template>
  <slot />
</template>


<script setup>
import { provide } from "vue";
import PrixLivre from "./PrixLivre.vue";
import ZoneSuisse from "./ZoneSuisse.vue";
import { cleFormatPrix } from "./cles.js";

const format = new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" });
provide(cleFormatPrix, (prix) => format.format(prix));
</script>

<template>
  <p>France : <PrixLivre :prix="8.5" /></p>
  <ZoneSuisse>
    <p>Suisse : <PrixLivre :prix="8.5" /></p>
  </ZoneSuisse>
</template>


France : 8,50 €
Suisse : 8.50 CHF

Le fournisseur le plus proche l'emporte : dans la zone suisse, c'est son format qui est injecté, et non celui de l'application. Ici, on fournit une fonction : elle ne change pas, une valeur ordinaire suffit.

Énoncé

Corrigé