有没有一种简单的方法可以从 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.vuemethods: {    getCoinsData: function () {     ...    },    changeToNgn: function () {    ...    },    changeToUsd: function () {     ...    },    changeToEur: function () {    ...    },  },我希望单击事件来App.vue调用该函数，CoinList.vue但它似乎不起作用。我在某处读到过有关事件总线的信息，但我似乎无法掌握它的窍门，如果有什么可以帮助我的，我将非常感激。

Answer 1

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

表明ref：

<coin-list ref="coinList" />

用它

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