VueJS：如何在 App.vue 中编辑所有相同类型的组件

Question

如果我有一个这样的模板，其中包含 FruitPrices 作为组件：

<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

我想知道是否有可能让 SOME_FUNCTION 成为一种改变所有 FruitPrices 组件中货币的方法？即，如果某些组件是美元，有些是英镑，我可以通过当前主应用程序中的方法将它们全部设置为欧元吗？

Answer 1

您可以在数据对象中为货币设置一个属性，并在所有组件中使用该属性，并使用一个函数来更改它。data() {&nbsp; return {&nbsp; &nbsp; currency: "USD",&nbsp; &nbsp; ...&nbsp; }},methods: {&nbsp; changeCurrency(newCurrency){&nbsp; &nbsp; this.currency = newCurrency;&nbsp; }}并在模板中<span @click=changeCurrency('Euro')> Change currency </span>

Answer 2

我不知道我是否明白了你的问题的逻辑，但也许你可以像这样使用 vue道具：&nbsp; &nbsp; &nbsp; <FruitPrices fruit="apple" :currency="newCurrency || 'USD'"></FruitPrices>&nbsp; &nbsp; &nbsp; <FruitPrices fruit="banana" :currency="newCurrency || 'GBP'"></FruitPrices>&nbsp; &nbsp; &nbsp; <FruitPrices fruit="orange" :currency="newCurrency || 'USD'"></FruitPrices>currency您可以在组件内定义道具FruitPrices。如果currency未定义 prop，则将第二种货币作为默认值（例如"newCurrency || 'GBP'"，如果newCurrency为 null，则货币 GBP 将作为默认值）。用于道具的 Vue 文档：https ://v2.vuejs.org/v2/guide/components-props.html然后在主模板组件中，定义变量newCurrency并将该变量传递给currency组件的 prop FruitPrices：data: () => {&nbsp; &nbsp; newCurrency: null},methods: {&nbsp; &nbsp; setNewCurrency() {&nbsp; &nbsp; &nbsp; &nbsp; this.newCurrency = this.someFieldOfYourForm;&nbsp; &nbsp; }}

Answer 3

让我们使用这个组件将货币、价格和水果传递给每个组件 FruitPrices 组件：<template>&nbsp; <div>&nbsp; &nbsp; <!-- USD is selected by default, once the option change, the prices will be updated -->&nbsp; &nbsp; <select v-model="currency">&nbsp; &nbsp; &nbsp; <!-- allows to select one currency at time, it shows all the currencies&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; that exist in the currencies array data property -->&nbsp; &nbsp; &nbsp; <option&nbsp; &nbsp; &nbsp; &nbsp; v-for="(currencyOption, index) in currencies"&nbsp; &nbsp; &nbsp; &nbsp; :key="index"&nbsp; &nbsp; &nbsp; &nbsp; :value="currencyOption"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <!-- show only the currency name as option -->&nbsp; &nbsp; &nbsp; &nbsp; {{ currencyOption.name }}&nbsp; &nbsp; &nbsp; </option>&nbsp; &nbsp; </select>&nbsp; &nbsp; <div v-for="(fruit, fruitIndex) in fruitsWithPrices" :key="fruitIndex">&nbsp; &nbsp; &nbsp; <!-- if everything is working fine, you don't need close tags for empty&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; custom component, you can use '/' at the end of the first tag to self close it-->&nbsp; &nbsp; &nbsp; <FruitPrices :name="fruit.name" :convertedPrice="fruit.convertedPrice" />&nbsp; &nbsp; </div>&nbsp; </div></template><script>import FruitPrices from '../somePlace/FruitPrices'export default {&nbsp; name: "FruitPricesContainer",&nbsp; components: { FruitPrices },&nbsp; data: () => ({&nbsp; &nbsp; fruits: [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; name: 'Apple',&nbsp; &nbsp; &nbsp; &nbsp; price: 0.2&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; name: 'Banana',&nbsp; &nbsp; &nbsp; &nbsp; price: 0.3&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; name: 'Orange',&nbsp; &nbsp; &nbsp; &nbsp; price: 0.25&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ],&nbsp; &nbsp; currency: {&nbsp; &nbsp; &nbsp; // Base currency, exchangeRate = 1&nbsp; &nbsp; &nbsp; exchangeRate: 1,&nbsp; &nbsp; &nbsp; name: 'USD'&nbsp; &nbsp; },&nbsp; &nbsp; // Used exchange rates only for demo purpose, not are the real and valid exchange rates&nbsp; &nbsp; currencies: [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; exchangeRate: 1,&nbsp; &nbsp; &nbsp; &nbsp; name: 'USD'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; exchangeRate: 1.2,&nbsp; &nbsp; &nbsp; &nbsp; name: 'EUR'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; exchangeRate: 0.7,&nbsp; &nbsp; &nbsp; &nbsp; name: 'SGD'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; exchangeRate: 700,&nbsp; &nbsp; &nbsp; &nbsp; name: 'MXN'&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; exchangeRate: 3700,&nbsp; &nbsp; &nbsp; &nbsp; name: 'COP'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; ]&nbsp; }),&nbsp; computed: {&nbsp; &nbsp; // The fruitsWithPrices listen for changes in both, the fruit and&nbsp; &nbsp; // the currency, so once you change it by selecting a different currency&nbsp; &nbsp; // the prices will be updated automatically (nice)&nbsp; &nbsp; fruitsWithPrices() {&nbsp; &nbsp; &nbsp; return this.fruits.map((fruit) => {&nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...fruit, // Add name and original price to the returned object&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; convertedPrice: fruit.price * this.currency.exchangeRate // Add the price based on the exchange rate&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; }&nbsp; }}</script>现在，让我们创建 FruitPrices 组件：<template>&nbsp; <div>&nbsp; &nbsp; <p>{{ name }}: {{ convertedPrice }}</p>&nbsp; </div></template><script>export default {&nbsp; name: "FruitPrices",&nbsp; props: {&nbsp; &nbsp; name: {&nbsp; &nbsp; &nbsp; type: String,&nbsp; &nbsp; &nbsp; required: true&nbsp; &nbsp; },&nbsp; &nbsp; convertedPrice: {&nbsp; &nbsp; &nbsp; type: Number,&nbsp; &nbsp; &nbsp; required: true&nbsp; &nbsp; }&nbsp; }}</script>它已经准备好了！（Tbh，我没有测试它，如果您有错误或问题，请告诉我）。