I am learning vue, why I click the edit button of the parent component, the child component dialog box is not displayed?

I have changed the value of dialogVisible to true, but the dialog box just doesn’t display

I modified the dialogVisible value of the subcomponent to true through ref, and passed the ID of each piece of data through props. I think there is nothing wrong with what I did. Originally, I wanted to implement the modification function, but now I can’t even display the dialog box. Can someone help me?

parent component

<template>
<div>
  <NavMenu></NavMenu>
  <listQuery></listQuery>
  <DialogAddAffairsType></DialogAddAffairsType>
  <el-table :data="tableData" stripe fit class="el-table" :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
    <el-table-column prop="id" label="ID" width="180">
    </el-table-column>
    <el-table-column prop="typename" label="类型名称" width="180">
    </el-table-column>
    <el-table-column prop="createdAt" label="创建时间">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="handleEdit(scope.row.id)">编辑(edit)</el-button>
        <el-button size="mini" type="danger" @click="handleDelete(scope.row.id, scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 前组件后数据 -->
  <editAffairsType :editAffairsType="affairsTypeId" ref="editAffairsType"></editAffairsType>
  <Pager></Pager>
</div>
</template>

<script>
import axios from "axios";
import ListQuery from "@/components/ListQuery/index.vue";
import DialogAddAffairsType from "@/components/DialogAddAffairsType/index.vue";
import Pager from "@/components/Pager/index.vue";
import NavMenu from "@/components/NavMenu/index.vue";
import editAffairsType from "@/components/DialogAffairsType/index.vue";

export default {
  name: 'AffairsTypeList',
  components: {
    ListQuery,
    DialogAddAffairsType,
    Pager,
    NavMenu,
    editAffairsType,
  },
  methods: {
    getAllAffairsTypes() {
      axios({
        method: 'GET',
        url: 'http://localhost:8080/api/affairsType/allAffairsTypes'
      }).then(response => {
        const data = response.data;
        console.log("是否取到数据", data);
        this.tableData = data;
      })
    },
    handleDelete(id, index) {
      this.$confirm("永久删除该事务类型, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          axios({
            method: 'DELETE',
            url: 'http://localhost:8080/api/affairsType/deleteById',
            params: {
              id: id
            }
          }).then(response => {
            if (response.status == 200) {
              this.tableData.splice(index, 1);
            }
          })
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleEdit(id) {
      this.affairsTypeId = id;
      this.$refs.editAffairsType.dialogVisible = true;

      console.log("数据准备成功")
      console.log(this.change[0])

      return this.affairsTypeId;
    }
  },
  // 在实例创建完成后被立即同步调用(https://cn.vuejs.org/v2/api/#created)
  created() {
    this.getAllAffairsTypes();
  },
  data() {
    return {
      tableData: [],
      affairsTypeId: "",
    }
  }
}
</script>

<style>
.el-table {
  margin: 0 auto;
}
</style>

child component

<template>
<div>
  <el-dialog title="修改事务类型" :visible.sync="dialogVisible" width="35%">
    <span>
      <el-form :model="AffairsType" :label-position="labelPosition" label-width="auto">
        <el-form-item label="类型名称" required>
          <el-input v-model="AffairsType.typename" :placeholder="placeholder.typename" style="width:50%"></el-input>
        </el-form-item>
      </el-form>
    </span>
    <span slot="footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "editAffairsType",
  // https://www.bilibili.com/video/BV1Zy4y1K7SH?p=66
  props: {
    affairsTypeId:{
      // type:Number,
      // required:true,
    }
  },
  data() {
    return {
      dialogVisible: false,
    }
  },
  methods: {
    // change() {
    //   this.dialogVisible = this.changeAffairsType.dialogVisible;
    // },
  },
  created(){
  },
}
</script>

<style>

</style>