一.在父组件页面中引入子组件页面

1.导入子组件

import AddVue from "@/views/vendor/Add.vue";

2.引入子组件标签，并设置ref值

  <AddVue ref="AddVueRef"></AddVue>

二.父组件向子组件传参，改变子组件变量的值

实际应用：点击按钮打开弹窗
1.父组件加入一个按钮

 <el-form-item>
      <el-button type="success" @click="onAdd">新增供应商</el-button>
    </el-form-item>

2.父组件写点击事件

const onAdd = () => {
    // 父调用子属性其前提是子类已经暴露 drawer改变他的值为true显示弹窗
    AddVueRef.value.drawer = true;
    // 父调子类已经暴露 子方法
    AddVueRef.value.test("父调子方法");
};

3.子组件暴露属性，方便父类调用

// 子类暴露属性，方便父类调用
defineExpose({ drawer});

扩展：父组件调用子组件的方法
1.子组件定义一个测试的方法 m传参

const test =(m)=>{
    alert(m)
}

2.暴露方法

defineExpose({ test });

2.父调子类已经暴露 的方法

AddVueRef.value.test("父调子方法");

三.子组件调用父组件的方法

实际应用：子组件添加完成之后，调用父组件的查询方法，重新加载页面
1.父暴露这个方法，方便子类调用

defineExpose({ reflush});

2.子组件vue导入getCurrentInstance，目的是为了获取当前父类暴露的实例，调用父类的方法或者属性

import { getCurrentInstance } from "vue";

3.子组件定义instance为当前实例

const instance = getCurrentInstance();

4. 子调用父的方法reflush，可以传参(“你换女朋友了？”)

instance.ctx.$parent.reflush(“你换女朋友了？”);
5.父定义一个变量可以接收参数(n:string)，不传就不用定义

const reflush = (n:string)=>{
  alert(n+girlfrend.value);
  getData4Table();
}

扩展：子组件向父组件传参，改变父组件变量的值
1.父暴露这个属性，方便子类调用

// 测试，子调用父这个属性
const  girlfrend = ref("苍老师");


defineExpose({ girlfrend});

2. 子调用父的属性，并改值，不传参就不改值

instance.ctx.$parent.girlfrend="辣目洋子"

四.完整代码展示

子组件页面

<template>
  <el-drawer size="50%" v-model="drawer" title="新增供应商" :direction="direction">
    <el-form :model="form" label-width="120px">
      <el-form-item label="名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="名称">
        <el-cascader
          size="large"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange"
        />
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="form.address" />
      </el-form-item>
      <el-form-item label="排序号">
        <el-input v-model="form.seq" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script lang="ts" setup>
// getCurrentInstance  vue导入getCurrentInstance，目的是为了获取当前父类暴露的实例，调用父类的方法或者属性
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import http from "@/http/index";
import type { UploadInstance } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { regionData } from "element-china-area-data";
import { ElMessage } from "element-plus";
import { fa } from "element-plus/es/locale";
const route = useRoute();
const router = useRouter();
// 定义instance为当前实例
const instance = getCurrentInstance();
const form = reactive({
  name: "",
  address: "",
  seq: 0,
  PCD: [],
});
// 弹窗 为false默认不打卡
const drawer = ref(false);
const direction = ref("ltr");

//省市区三级联动开始
const options = ref(regionData);
const selectedOptions = ref([]);
const handleChange = (selected: any) => {
  form.PCD = selected;
};
//省市区三级联动结束

const onSubmit = () => {
  http
    .post("/api/vendor/insert", {
      name: form.name,
      seq: form.seq,
      address: form.address,
      province: form.PCD[0],
      city: form.PCD[1],
      district: form.PCD[2],
    })
    .then((res: any) => {
      if (res === 1) {
        ElMessage({
          message: "修改成功",
          type: "success",
        });
        drawer.value = false;
        console.log(instance);
        // 子调用父的属性，并改值
        instance.ctx.$parent.girlfrend="辣目洋子"
        // 子调用父的方法reflush
        instance.ctx.$parent.reflush("你换女朋友了？");
        
      }
    })
    .catch((err: any) => {
      console.log(err);
    });
};
const test =(m)=>{
    alert(m)
}
// 子类暴露属性和方法，方便父类调用
defineExpose({ drawer,test });
</script>

父组件页面

<template>
<!-- 子组件 -->
  <AddVue ref="AddVueRef"></AddVue>

  <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item label="名称">
      <el-input v-model="form.name" placeholder="名称"> </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="onAdd">新增供应商</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" style="width: 100%" border>
    <el-table-column prop="id" label="#ID" width="80" fixed />
    <el-table-column prop="name" label="Name" width="180" fixed>
    </el-table-column>
    <el-table-column prop="statusX" label="状态" width="100" />
    <el-table-column
      prop="lastUpdateBy"
      label="最近操作人"
      :formatter="formatter"
      width="100"
    />
    <el-table-column
      prop="lastUpdateTime"
      label="最近操作时间"
      :formatter="formatter"
      width="150"
    />
   
  </el-table>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
// 导入子组件
import AddVue from "@/views/vendor/Add.vue";
import http from "@/http/index";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ElMessageBox } from "element-plus";
import dayjs from "dayjs";
// 定义变量 AddVueRef与子组件ref一样
const AddVueRef = ref();

const form = reactive({
  name: "",
});

const tableData = ref([]);
const getData4Table = () => {
  http
    .post("/api/vendor/select", {
      name: form.name,
    })
    .then((data: any) => {
      tableData.value = data;
    })
    .catch((err: any) => {
      console.log(err);
    });
};

onMounted(() => {
  getData4Table();
});

const onSubmit = () => {
  getData4Table();
};

const reflush = (n:string)=>{
  alert(n+girlfrend.value);
  getData4Table();
}
// 测试，子调用父这个属性，父设置下面
const  girlfrend = ref("苍老师");

const onAdd = () => {
    // 父调用子属性其前提是子类已经暴露 drawer改变他的值为true显示弹窗
    AddVueRef.value.drawer = true;
    // 父调子类已经暴露 子方法
    AddVueRef.value.test("父调子方法");
};

//格式化
const formatter = (row: any, column: any) => {
  if (column.property === "lastUpdateTime") {
    return dayjs(row.lastUpdateTime).format("MM-DD HH:mm:ss");
  }
  if (column.property === "lastUpdateBy") {
    let index = row.lastUpdateBy.indexOf("@");
    return row.lastUpdateBy.substring(0, index);
  }
  if (column.property === "name") {
    if (row.name.length > 10) {
      return row.name.substring(0, 10) + "...";
    } else {
      return row.name;
    }
  }
};

// 父暴露这个方法和属性，方便子类调用
defineExpose({ reflush ,girlfrend});
</script>