vue 获得子组件文本框里的值

在 Vue 中，可以通过使用 `ref` 来获取子组件中的文本框值。具体步骤如下：

1. 在父组件中给子组件添加 `ref` 属性，如下：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="getValue">获取子组件文本框的值</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    getValue() {
      const childValue = this.$refs.child.$refs.input.value;
      console.log(childValue);
    }
  }
}
</script>

2. 在子组件中给文本框添加 `ref` 属性，如下：

<template>
  <div>
    <input type="text" ref="input">
  </div>
</template>

在父组件的 `getValue` 方法中，通过 `this.$refs.child` 获取到子组件实例，再通过 `$refs.input` 获取到子组件的文本框，最后通过 `.value` 获取文本框的值。

需要注意的是，`ref` 可以给任意组件添加，但是获取到的实例是一个原生的 DOM 元素。如果需要获取到组件实例，需要在子组件中使用 `$refs`，比如上面的示例中，可以通过 `this.$refs.input` 获取到子组件中的文本框。