How to call a method from child component to parent one in vue2?

Question

I have a child component called ZimModel.vue where I created a method drawGrid(). I need to call this method in parent component (mainPage.vue). The idea is to call this method once the user has finished typing values in input (namely: width of the grid - I added @input event to v-model="inputWidth"). That's why I also use setTimeout with 5 sec delay. However, I have no idea how to 'send' this method up to parent component. I tried with emit but I don't think it makes any sense. I use Vuex store in my app but this particular method is strictly related to other data and methods in ZimModel.vue so I don't think it' makes sense to move it to Vuex. Is there any pattern/good practice I should follow in this case?

Here is a reproducible example: https://codesandbox.io/s/vue-2-playground-vuex-drag-and-snap-to-tiles-un6984?file=/src/components/mainPage.vue. As an example I added myGreeting() method (in mainPage.vue) to show how I want my program to work. I need to replace this exemplary method with target drawGrid() method.

Answer 1

Using $ref will solve your issue:

<ZimModel ref="zimModel" />

And inside your method:

triggerDrawing() {
  clearTimeout(this.timer);
  // this.timer = setTimeout(this.myGreeting, 5000);
  this.$refs.zimModel.drawGrid();
}