有没有一种简单的方法可以从 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但它似乎不起作用。我在某处读到过有关事件总线的信息，但我似乎无法掌握它的窍门，如果有什么可以帮助我的，我将非常感激。

Answer 1

您可以使用ref如下指令调用子组件方法：表明ref：<coin-list&nbsp;ref="coinList"&nbsp;/>用它changeToEur&nbsp;()&nbsp;{ &nbsp;&nbsp;this.$refs.coinList.changeToUsd() }