Si j'ai un modèle en tant que tel avec des fruits en tant que composant:
<template>
<div id="app">
<div>
<span @click=SOME_FUNCTION> Change currency </span>
<FruitPrices fruit="apple"></FruitPrices>
<FruitPrices fruit="banana"></FruitPrices>
<FruitPrices fruit="orange"></FruitPrices>
...
....
.....
</template>
...
...
...
import FruitPrices from ./component/FruitPrices.vue
3 Réponses :
Vous pouvez définir une propriété dans l'objet de données pour la devise et utiliser cela sur tous les composants et avoir une fonction modifier.
<span @click=changeCurrency('Euro')> Change currency </span>
Je ne sais pas si j'avais la logique de votre problème, mais vous pouvez peut-être utiliser le VUE accessoires comme ceci: Vous pouvez définir les accessoires Vue Docs pour les accessoires: https://vuejs.org/v2/guide/components-props.html Dans le composant Modèle principal, vous définissez la variable devise à l'intérieur du composant fruitprices . Si la devise de devise n'est pas définie, la deuxième devise va être prise comme valeur par défaut (par exemple "NewCurrency ||" GBP "" si newcurrency est NULL puis la devise GBP est prise par défaut). NewCurrency < / Code> Et vous passez cette variable à la devise PROP du composant fruitprices :
Utilisez ce composant pour transmettre la devise, le prix et les fruits à chaque composant des fruits des composants:
<template>
<div>
<p>{{ name }}: {{ convertedPrice }}</p>
</div>
</template>
<script>
export default {
name: "FruitPrices",
props: {
name: {
type: String,
required: true
},
convertedPrice: {
type: Number,
required: true
}
}
}
</script>
Quel est le composant des fruits?