javascript - 是否有一种简单的方法可以从 vue 中的一个组件调用方法到另一个组件

Question

我有两个组件，App.Vue和CoinList.vue，但是我在调​​用方法时遇到了一些问题，代码如下：

片段App.vue

<q-list>
        <q-item clickable v-close-popup @click="cct">
           <q-item-section avatar>
          ₦
        </q-item-section>

        <q-item-section>NAIRA</q-item-section>
        </q-item>

        <q-item clickable v-close-popup @click="changeToUsd()">
           <q-item-section avatar>
          $
        </q-item-section>

        <q-item-section>USD</q-item-section>
        </q-item>

        <q-item clickable v-close-popup @click="changeToEur()">
          <q-item-section avatar>
          €
        </q-item-section>

        <q-item-section>EUR</q-item-section>
        </q-item>
      </q-list>

片段CoinList.vue

methods: {
    getCoinsData: function () {
     ...
    },
    changeToNgn: function () {
    ...
    },
    changeToUsd: function () {
     ...
    },
    changeToEur: function () {
    ...
    },
  },

我希望点击事件App.vue调用函数，CoinList.vue但它似乎不起作用。我在某处读到了有关事件总线的信息，但我似乎无法掌握它，如果无论如何我可以得到帮助，我将非常感激。

标签： javascriptvue.jsvue-component

Answer 1

ref您可以使用如下指令调用子组件方法：

说明ref：

<coin-list ref="coinList" />

用它

changeToEur () {
  this.$refs.coinList.changeToUsd()
}