vue click on parent button made click on button in childs components

Question

I have child components with buttons. Click on buttons call method.

In the parent component, I want to have a "Create" button. Click on that button will like clicked on first button in all child component. How do it in vue?

SANDBOX: https://codesandbox.io/s/blazing-dew-zmsky

Answer 1

You can use refs to access all child components to be able to call a method for each of them:

<template>
  <div id="app">
    <HelloWorld v-for="i in 4" :key="i" ref="childs"/>

    <button class="allin" @click="click">Click to select 1m in all childs</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  methods: {
     click () {
       for (const child of this.$refs.childs) {
         child.changePeriod(0)
       }
     }
  }
};
</script>