[Vue3：组件通信）子组件props接收和watch监听，emit发送父组件 (添加修改设置成绩，添加、删除选课记录）

一：系统功能：设置成绩（添加或修改）

交互逻辑：涉及页面 Page02.vue，ModalEdit.vue

点击成绩修改按钮弹出 成绩修改页面，展示分数并可设置分数
点击提交发送请求/api/baseStudentCourse/updata
成功则返回上一页面进行刷新数据发送请求/api/baseStudentCourse/list

主页面Page.vue注入子页面，使用子页面标签属性

<el-table-column label="操作" width="380">
        <template #default="{ row, $index }">
          <el-button size="mini" type="warning" @click="editItem(row, $index)"  @updateData="handleData"  >成绩修改</el-button>
          <el-button size="mini" type="warning" @click="addItem(row, $index)"  @updateData="handleData"  >成绩添加</el-button>
          <el-button size="mini" type="danger" @click="handleDeleteCourse(row, $index)"  @updateData="handleData"  >删除选课</el-button>
        </template>
      </el-table-column>
    </el-table>
<ModalEdit v-model:visible="showModal" :edit-data="editData" :show-flag = "showFlag" @refreshData="refreshData" />
<ModalCourseAdd v-model:visible="showModalAddCourse" @refreshData="refreshData" />

<script setup>
import {
    useRouter } from 'vue-router';
import {
   onMounted, ref} from 'vue';
import axios from "axios";
import ModalEdit from "./ModalEdit.vue";
import ModalCourseAdd from "./ModalCourseAdd.vue";
const showModal = ref(false);
const showModalAddCourse = ref(false);
const editData = ref(null);
const showFlag = ref(String);

主页面对子页面做通信，子页面ModalEdit接收参数和监听时间涉及到组件props，watch

子页面ModalEdit通过props属性接收控制属性

在 Vue.js 中，props 用于接收来自父组件的数据。这里定义了三个属性（props）：visible、editData 和 showFlag。我将逐一分析这些属性

父页面Page当点击add或edit, 设置这个showModal.value属性为true（v-model:visible=“showModal”），这里showModal，并给editData赋值
在 Vue 3 中，v-model 可以绑定到组件的任意 prop 上，这里它绑定了 showModal 数据属性，这意味着 showModal 的值将与 ModalEdit 组件内部的 visible 状态保持同步。当 ModalEdit 组件的 visible 状态改变时，它会更新父组件的 showModal 数据属性，反之亦然。
:show-flag=“showFlag”: 类似地，这也是一个动态 prop 绑定，将父组件中的 showFlag 数据传递给 ModalEdit 组件。showFlag 可能用于控制模态框中某些元素的显示或隐藏。

const editItem = (item, index) => {
   
  editData.value = item;
  showModal.value = true; //  v-model:visible="showModal"
  showFlag.value = '成绩修改';
};
const addItem = (item, index) => {
   
  editData.value = item;
  showModal.value = true;
  showFlag.value = '成绩添加';
};

watch是vue组件的一个选项，这里是用来监视visible这个数据属性的变化；
父页面visible属性默认是false

<ModalEdit v-model:visible="showModal" :edit-data="editData" :show-flag = "showFlag" @refreshData="refreshData" />
const showModal = ref(false);

父页面点击操作visible设置true，子页面同时watch监听visible发生变化，editData展示和渲染默认成绩数据，visible 为true展示页面（默认隐藏）

watch: {
   
    visible() {
   
      this.formData.id = this.editData.id; // 初始化id字段
      this.formData.score = this.editData.score;
      // this.formData.score = this.editData.score;
    }
  },
  props: {
   
    visible: {
   
      type: Boolean,
      required: true
    },
    editData: {
   
      type: Object,
      default: () => ({
   })
    },
    showFlag: {
   
      type: Object,
      default: () => ({
   })
    }
  },

子页面ModalEdit向父页面传递参数

这部分定义了该组件可能向父组件发出的三个自定义事件：
update:visible：通常用于更新一个名为 visible 的 prop 的值，这是 Vue 的 .sync 修饰符常用的模式。
submit：可能是当表单数据被提交时触发的事件。
refreshData：可能是当数据更新后，通知父组件刷新或重新获取数据的事件。

这里主要用了refreshData事件：当子页面更新成功后通知父组件事件函数(重新请求刷新数据)
ModalEdit
子页面：

this.$emit('refreshData', {
    // 假设服务器返回了更新后的数据，或者你可以传递更新后的id和score
            success: true,
            message: resp.data.message,
 });

父页面：

<template>
		<ModalEdit v-model:visible="showModal" :edit-data="editData" :show-flag = "showFlag" @refreshData="refreshData" />
</template>
<script setup>
// 成绩修改
const refreshData = () => {
   
  axios.post("/api/baseStudentCourse/list", {
   
    id: localStorage.getItem('id')}).then(resp => {
   
    if (resp.data.code === 200) {
   
      tableData.value = resp.data.data
    } else {
   
      alert(resp.data.message);
    }
  })
  showModal.value = false;
  showModalAddCourse.value = false;
} ;
</script>

  emits: ['update:visible', 'submit', 'refreshData'],
  methods: {
   
    handleSubmit() {
   
      // 确保发送完整对象，包含id字段
      this.$emit('submit', { ...this.formData });
    },
    closeModal() {
   
      this.$emit('update:visible', false);
    },
    // 成绩录入/修改
    submit () {
   
      debugger
      console.log(this.formData)
      // 编辑逻辑
      const response = axios.post("/api/baseStudentCourse/update", {
   
        id: this.formData.id,
        score: this.formData.score
      }).then(resp => {
   
        if (resp.data.code === 200) {