Как передать метод из одного компонента в другой и использовать его по клику в Vue. js?

Question

Итак, в моем компоненте App. vue у меня отображаются два других компонента, и я хочу достичь этого, когда пользователь нажимает кнопку воспроизведения, следует использовать метод animateRing () из компонента ProgressRing. Мой код выглядит следующим образом:

Приложение. vue

<template>
  <div id="app">
    <ProgressRing>
        <PlayButton
          @click="animateRing(), active = !active"
          :class="{active: active}"
        />
    </ProgressRing>
  </div>
</template>

PlayButton. vue

<template>
  <button class="play-button" @click="$emit('click')">
    ...
    some irrelevant code here
    ...
  </button>
</template>

ProgressRing. vue

<template> 
...some code...
</template>

<script>
export default {
  methods: {
    animateRing(){
      console.log('I'm animated');
    }
  }
};
</script>

Кажется, я не могу найти правильный способ сделать это. Каков наилучший способ заставить метод работать в компоненте App? Я относительно новичок в Vue и до сих пор не понял этого.

Answer 1

Вот один из способов, которым вы можете выполнить sh это:

Приложение. vue

<template>
  <div id="app">
    <ProgressRing ref="progressRing">
        <PlayButton
          @click="animateRing(), active = !active"
          :class="{active: active}"
        />
    </ProgressRing>
  </div>
</template>

<script>
export default {
  methods: {
    animateRing(){
      this.$refs.progressRing.animateRing()
    }
  }
};
</script>

Мне любопытно, почему PlayButton является ребенком ProgressRing, но не определено в ProgressRing. vue.