vue父组件如何使用refs获取子组件数据
时间: 2023-11-18 20:02:30 浏览: 35
在Vue中,父组件可以使用`ref`来获取子组件的实例,从而访问子组件的数据。下面是一个示例:
在子组件中,给需要获取数据的DOM元素添加一个`ref`属性:
```vue
<template>
<div>
<input type="text" ref="inputRef" />
<button @click="submit">提交</button>
</div>
</template>
<script>
export default {
methods: {
submit() {
const inputValue = this.$refs.inputRef.value;
// 使用this.$refs.inputRef.value来访问输入框的值
console.log(inputValue);
}
}
};
</script>
```
在父组件中,使用`ref`属性来引用子组件,并通过引用访问子组件的数据和方法:
```vue
<template>
<div>
<child-component ref="childRef"></child-component>
<button @click="getChildData">获取子组件数据</button>
</div>
</template>
<script>
export default {
methods: {
getChildData() {
const childComponent = this.$refs.childRef;
// 使用this.$refs.childRef来获取子组件实例
console.log(childComponent.$refs.inputRef.value);
// 使用childComponent.$refs.inputRef.value来访问子组件的输入框值
}
}
};
</script>
```
通过使用`this.$refs.childRef`来获取子组件实例,然后再通过实例的`$refs`属性来访问子组件的`ref`属性。这样就可以获取到子组件的数据了。