vue單擊父按鈕使單擊子組件中的按鈕

Question

我有帶按鈕的子組件。 單擊按鈕調用方法。

在父組件中，我想要一個“創建”按鈕。 單擊該按鈕就像單擊所有子組件中的第一個按鈕一樣。 在vue中是如何實現的？

沙盒： https://codesandbox.io/s/blazing-dew-zmsky

Answer 1

您可以使用refs訪問所有子組件，以便能夠為每個子組件調用方法：

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