vue3通过refs调用方法

在Vue3中，可以通过使用`ref`来获取子组件的引用，并调用其方法。首先，在父组件的模板中，给子组件添加一个`ref`属性，例如`ref="eleTable"`。然后，在父组件的`setup`函数中，使用`ref`方法创建一个变量，例如`const eleTable = ref()`。接下来，可以通过`eleTable.value`来访问子组件的方法和属性。例如，调用子组件的方法可以使用`eleTable.value.changeShowText()`，获取子组件的数据可以使用`eleTable.value.tableData`。这样就可以通过`ref`来调用子组件的方法了。\[1\]

举个例子，假设子组件的模板中有一个按钮，点击按钮会改变一个变量的值。在子组件的`setup`函数中，可以使用`ref`方法创建一个变量，例如`const conts = ref("我是子组件")`，并定义一个方法`changeShowText`来改变这个变量的值。然后，在父组件的`setup`函数中，可以通过`eleTable.value.changeShowText()`来调用子组件的方法，从而改变子组件中的变量的值。\[1\]

总结起来，Vue3中可以通过`ref`来获取子组件的引用，并调用其方法。这样可以实现父组件与子组件之间的交互。\[1\]
#### 引用[.reference_title]
- *1* [vue3.0中使用ref来调用子组件的方法](https://blog.csdn.net/m0_67402125/article/details/123434056)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [【vue3的3种调用Ref的方式】](https://blog.csdn.net/qq_42966709/article/details/125929049)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [Vue3 父组件调用子组件方法（$refs 在setup()、＜script setup＞ 中使用）](https://blog.csdn.net/zz00008888/article/details/126095130)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]