Vue3.2跨组件刷新数据：如何正确使用defineEmits更新视图？

1. 完善子组件（CreateNewAccessGroupModal）的emit逻辑 #

先在子组件里声明要触发的自定义事件，再在Laravel请求成功后触发事件通知父组件。

<template>
  <div class="modal">
    <!-- 表单内容 -->
    <button @click="saveChanges">Save Changes</button>
  </div>
</template>

<script setup>
import { defineEmits } from 'vue'
import axios from 'axios'

// 定义要触发的自定义事件
const emit = defineEmits(['access-group-created'])

const saveChanges = async () => {
  try {
    // 收集表单绑定的数据
    const formData = { /* 你的表单字段，比如name、description等 */ }
    
    // 发送POST请求到Laravel后端接口
    const response = await axios.post('/api/access-groups', formData)
    
    // 请求成功后触发事件，可携带新创建的分组数据（可选）
    emit('access-group-created', response.data)
    
    // 关闭模态框等后续操作
    // ...
  } catch (error) {
    console.error('创建权限组失败:', error)
  }
}
</script>

2. 父组件（AccessGroup）监听事件并刷新数据 #

在父组件中引入子组件时，监听子组件触发的access-group-created事件，绑定刷新数据的方法。

<template>
  <div>
    <!-- 渲染权限组列表 -->
    <div v-for="group in accessGroups" :key="group.id" class="group-item">
      {{ group.name }}
    </div>
    
    <!-- 引入模态框组件并监听事件 -->
    <CreateNewAccessGroupModal @access-group-created="refreshAccessGroups" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import CreateNewAccessGroupModal from './CreateNewAccessGroupModal.vue'

const accessGroups = ref([])

// 封装获取权限组列表的方法
const fetchAccessGroups = async () => {
  const response = await axios.get('/api/access-groups')
  accessGroups.value = response.data
}

// 刷新数据的方法
const refreshAccessGroups = (newGroup) => {
  // 可选优化：如果后端返回新数据，直接追加到数组不用重新请求
  if (newGroup) {
    accessGroups.value.push(newGroup)
  } else {
    fetchAccessGroups()
  }
}

// 初始化加载数据
onMounted(() => {
  fetchAccessGroups()
})
</script>

内容的提问来源于stack exchange，提问作者Jack88