vue3父组件操作子组件方法

在Vue3中，父组件要操作子组件的方法可以通过使用`ref`和`defineExpose`来实现。首先，在子组件中，你需要将要暴露给父组件的方法使用`defineExpose`导出。然后，在父组件中，通过使用`ref`来获取子组件的引用，然后可以调用子组件的方法。

具体操作步骤如下所示：
1. 在子组件中，定义一个`ref`来保存要操作的数据，例如`name`。
2. 在子组件中定义一个处理方法，例如`handle`，该方法可以修改`name`的值。
3. 使用`defineExpose`导出要暴露给父组件的方法，例如`handle`。
4. 在父组件中，使用`v-for`循环创建多个子组件，并给每个子组件添加`ref`属性，并将对应的引用存储在一个对象中。
5. 在父组件中，使用`Object.keys`遍历子组件的引用对象，并调用子组件的方法。

下面是一个示例代码供参考：

<!-- 子组件 -->
<template>
  <div>{{ name }}</div>
</template>

<script setup>
import { defineExpose, ref } from 'vue'

const name = ref('')

const handle = (val) => {
  name.value = val
}

defineExpose({ handle })
</script>

<!-- 父组件 -->
<template>
  <div>
    <template v-for="item in list">
      <child :ref="(el) => childRef(el, item.key)"/>
    </template>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const list = reactive([
  { key: 1, name: '第一个' },
  { key: 2, name: '第二个' },
  { key: 3, name: '第三个' },
  { key: 4, name: '第四个' },
])

const childRefList = reactive({})

const childRef = (el, key) => {
  if (el) childRefList[key = el

  Object.keys(childRefList).forEach((item) => {
    if (item != 4) {
      childRefList[item].handle('更改后的名字')
    }
  })
}
</script>

在这个示例中，父组件通过`childRef`方法获取子组件的引用，并调用子组件的`handle`方法来修改子组件的`name`数据。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue3父组件调用子组件里的方法](https://blog.csdn.net/ydZ157/article/details/126179621)[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%"]
- *3* [vue3 父组件调用子组件的方法](https://blog.csdn.net/xiao_cheng_/article/details/122742481)[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 ]