vue3 点击调用子组件

在Vue3中，你可以通过使用`ref`和`defineExpose`来实现点击调用子组件的方法。首先，在子组件中使用`defineExpose`将要触发的事件暴露出来。例如，给子组件定义一个`handle`方法：

<script setup>
import { defineExpose, ref } from 'vue'
const name = ref('')
const handle = (val) => {
  // 要触发的子组件的事件
  name.value = val
}
defineExpose({ handle })
</script>

然后，在父组件中，使用`v-for`循环渲染多个子组件，并通过传递一个`ref`函数给子组件的`ref`属性来获取对子组件实例的引用。在父组件中，你可以通过获取子组件引用并调用`handle`方法来触发子组件的事件。下面是一个示例：

<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>

这样，当你在父组件中循环渲染子组件时，点击按钮即可调用子组件中的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue父组件调用子组件的方法](https://blog.csdn.net/qq_32766999/article/details/126031008)[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* *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 ]