[Vuejs]-How to pass a method from one component to another and use it onclick in Vue.js?

by

0👍

✅

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.

Leave a comment