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() {

  return {

    currency: "USD",

    ...

  }

},

methods: {

  changeCurrency(newCurrency){

    this.currency = newCurrency;

  }

}

并在模板中

<span @click=changeCurrency('Euro')> Change currency </span>

Answer 2

我不知道我是否明白了你的问题的逻辑，但也许你可以像这样使用 vue道具：

      <FruitPrices fruit="apple" :currency="newCurrency || 'USD'"></FruitPrices>

      <FruitPrices fruit="banana" :currency="newCurrency || 'GBP'"></FruitPrices>

      <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: () => {

    newCurrency: null

},

methods: {

    setNewCurrency() {

        this.newCurrency = this.someFieldOfYourForm;

    }

}

Answer 3

让我们使用这个组件将货币、价格和水果传递给每个组件 FruitPrices 组件：

<template>

  <div>

    <!-- USD is selected by default, once the option change, the prices will be updated -->

    <select v-model="currency">

      <!-- allows to select one currency at time, it shows all the currencies

          that exist in the currencies array data property -->

      <option

        v-for="(currencyOption, index) in currencies"

        :key="index"

        :value="currencyOption"

      >

        <!-- show only the currency name as option -->

        {{ currencyOption.name }}

      </option>

    </select>

    <div v-for="(fruit, fruitIndex) in fruitsWithPrices" :key="fruitIndex">

      <!-- if everything is working fine, you don't need close tags for empty

          custom component, you can use '/' at the end of the first tag to self close it-->

      <FruitPrices :name="fruit.name" :convertedPrice="fruit.convertedPrice" />

    </div>

  </div>

</template>

<script>

import FruitPrices from '../somePlace/FruitPrices'

export default {

  name: "FruitPricesContainer",

  components: { FruitPrices },

  data: () => ({

    fruits: [

      {

        name: 'Apple',

        price: 0.2

      },

      {

        name: 'Banana',

        price: 0.3

      },

      {

        name: 'Orange',

        price: 0.25

      }

    ],

    currency: {

      // Base currency, exchangeRate = 1

      exchangeRate: 1,

      name: 'USD'

    },

    // Used exchange rates only for demo purpose, not are the real and valid exchange rates

    currencies: [

      {

        exchangeRate: 1,

        name: 'USD'

      },

      {

        exchangeRate: 1.2,

        name: 'EUR'

      },

      {

        exchangeRate: 0.7,

        name: 'SGD'

      },

      {

        exchangeRate: 700,

        name: 'MXN'

      },

      {

        exchangeRate: 3700,

        name: 'COP'

      }

    ]

  }),

  computed: {

    // The fruitsWithPrices listen for changes in both, the fruit and

    // the currency, so once you change it by selecting a different currency

    // the prices will be updated automatically (nice)

    fruitsWithPrices() {

      return this.fruits.map((fruit) => {

        return {

          ...fruit, // Add name and original price to the returned object

          convertedPrice: fruit.price * this.currency.exchangeRate // Add the price based on the exchange rate

        }

      })

    }

  }

}

</script>

现在，让我们创建 FruitPrices 组件：

<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>

它已经准备好了！（Tbh，我没有测试它，如果您有错误或问题，请告诉我）。