vue 获得子组件文本框里的值
时间: 2023-07-09 15:30:49 浏览: 79
在 Vue 中,可以通过使用 `ref` 来获取子组件中的文本框值。具体步骤如下:
1. 在父组件中给子组件添加 `ref` 属性,如下:
```html
<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` 属性,如下:
```html
<template>
<div>
<input type="text" ref="input">
</div>
</template>
```
在父组件的 `getValue` 方法中,通过 `this.$refs.child` 获取到子组件实例,再通过 `$refs.input` 获取到子组件的文本框,最后通过 `.value` 获取文本框的值。
需要注意的是,`ref` 可以给任意组件添加,但是获取到的实例是一个原生的 DOM 元素。如果需要获取到组件实例,需要在子组件中使用 `$refs`,比如上面的示例中,可以通过 `this.$refs.input` 获取到子组件中的文本框。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)