父元素动态获取子组件的值

如果你想要在父组件中获取子组件的值，可以通过以下两种方式实现：

1. 通过 props 传递

在子组件中定义一个 props，然后将子组件中的值作为 props 的值传递给父组件。父组件就可以通过 props 获取子组件的值。

例如，子组件中定义一个名为 `childValue` 的 props，然后将组件中的值作为 `childValue` 的值传递给父组件。

<template>
  <div>
    <input v-model="value" />
  </div>
</template>

<script>
export default {
  props: {
    childValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      value: this.childValue
    }
  },
  watch: {
    value(newValue) {
      this.$emit('update:childValue', newValue)
    }
  }
}
</script>

在父组件中使用子组件时，将子组件的 `childValue` 绑定到一个父组件的属性中。

<template>
  <div>
    <child-component :childValue.sync="parentValue"></child-component>
    <p>子组件的值是：{{ parentValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentValue: ''
    }
  }
}
</script>

这里使用了 `.sync` 修饰符来实现双向绑定。

2. 通过 $refs 获取

在子组件中定义一个 ref，在父组件中通过 $refs 获取子组件，然后就可以直接访问子组件的属性和方法。

例如，在子组件中定义一个名为 `childInput` 的 ref。

<template>
  <div>
    <input ref="childInput" v-model="value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>

在父组件中，可以通过 `$refs` 获取子组件，然后访问子组件的属性和方法。

<template>
  <div>
    <child-component ref="child"></child-component>
    <p>子组件的值是：{{ $refs.child.value }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.child.value) // undefined，因为子组件还没有渲染完成
    this.$nextTick(() => {
      console.log(this.$refs.child.value) // 可以获取子组件的值
    })
  }
}
</script>

需要注意的是，在父组件中通过 `$refs` 获取子组件时，需要在子组件渲染完成后才能访问子组件的属性和方法。因此，需要在 `$nextTick` 回调函数中访问子组件的属性和方法。