vue3 父组件获取子组件上的值和方法
时间: 2023-09-27 21:08:08 浏览: 45
在Vue3中,父组件可以通过使用`ref`来获取子组件的值和方法。首先,在父组件中,我们需要在引入子组件时使用`ref`来创建一个引用。然后,我们可以通过这个引用来访问子组件的属性和方法。比如,在父组件中定义一个方法,当我们点击这个方法时,可以调用子组件的方法。以下是示例代码:
```vue
<template>
<son ref="myRefs"></son>
<button @click="giveParentHandVal">向父组件传值</button>
</template>
<script setup lang="ts">
import son from '@/views/home/components/son.vue'
import { ref } from "vue"
// 获取绑定的ref
const myRefs = ref();
const giveParentHandVal = () => {
// 通过ref去调用子组件的change方法
myRefs.value.change()
// 这里也可以通过ref获取到子组件暴露出来想要父组件获取到的值
console.log(myRefs.value.age)
}
</script>
```
在这个示例代码中,我们在父组件中引入了子组件`son`并使用`ref`创建了一个引用`myRefs`。然后,在`giveParentHandVal`方法中,我们可以通过`myRefs.value`来访问子组件的方法`change()`和属性`age`。
这种方式与Vue2中使用`this.$refs`获取子组件的方式有些类似,但是在Vue3中我们使用`ref`来创建引用,然后使用`ref.value`来访问引用的值。这种方式可以让我们更方便地获取和操作子组件的值和方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue3.0 父组件调用子组件方法及获取子组件的值](https://blog.csdn.net/weixin_44132285/article/details/126517620)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [详解VUE里子组件如何获取父组件动态变化的值](https://download.csdn.net/download/weixin_38685857/12948301)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]