父组件v-if产生多个子组件 父组件一键获取全部子组件的值

根据提供的引用内容，我们可以看出这个问题涉及到父组件和子组件之间的通信。在Vue中，父组件可以通过v-model或props向子组件传递数据，而子组件可以通过$emit向父组件发送事件。因此，要实现父组件一键获取全部子组件的值，可以采用以下步骤：

1. 在父组件中使用v-for循环渲染多个子组件，并为每个子组件绑定一个ref属性。
2. 在子组件中，通过$emit发送一个自定义事件，将子组件的值传递给父组件。
3. 在父组件中，监听子组件的自定义事件，并将子组件的值存储在一个数组中。
4. 当需要获取全部子组件的值时，遍历存储子组件值的数组，获取每个子组件的值。

下面是一个简单的示例代码：

父组件：

<template>
  <div>
    <child-component v-for="(item, index) in items" :key="index" ref="childComponents" @get-value="handleGetValue"></child-component>
    <button @click="getAllValues">获取全部子组件的值</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      items: [1, 2, 3], // 子组件数量
      childValues: [] // 存储子组件的值
    }
  },
  methods: {
    handleGetValue(value) {
      this.childValues.push(value);
    },
    getAllValues() {
      this.$refs.childComponents.forEach(child => {
        const value = child.getValue();
        this.childValues.push(value);
      });
      console.log(this.childValues);
    }
  }
}
</script>

子组件：

<template>
  <div>
    <input type="text" v-model="value">
    <button @click="sendValue">发送值到父组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  },
  methods: {
    sendValue() {
      this.$emit('get-value', this.value);
    },
    getValue() {
      return this.value;
    }
  }
}
</script>