如何将方法从一个组件传递到另一个组件并在 Vue.js 中使用它？

Question

So in my App.vue component, I have two other components being rendered, and what I want to achieve is this, when the user clicks on the play button, animateRing() method from the component ProgressRing should be used, my code looks the following:

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

I can't seem to figure out the right way to do it. What is the best way to make the method to work in the App component? I'm relatively new to Vue and didn't really figure it out yet.

Answer 1

Here's one way you can accomplish this:

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

I'm curious about the reason for PlayButton being a child of ProgressRing , but not defined in ProgressRing.vue.