vue3获取子组件的值
时间: 2023-12-12 15:05:10 浏览: 26
可以通过以下步骤获取子组件的值:
1. 在父组件中引入子组件,并使用 `ref` 给子组件命名。
```html
<template>
<child-component ref="child"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
}
}
</script>
```
2. 在父组件中使用 `$refs` 访问子组件中的属性或方法。
```html
<template>
<div>
<p>子组件属性值:{{ $refs.child.property }}</p>
<button @click="getChildMethod">获取子组件方法返回值</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
getChildMethod() {
const result = this.$refs.child.method();
console.log('子组件方法返回值:', result);
}
}
}
</script>
```
在上面的代码中,`$refs.child` 代表子组件实例,可以通过 `.property` 或 `.method()` 获取子组件的属性或方法。