Vue3使用

1、列表实现

<el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" :header-cell-style="{'text-align':'center'}">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="date" label="日期" align="center">
      </el-table-column>
      <el-table-column prop="name" label="姓名" align="left">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="right">
      </el-table-column>
      <el-table-column prop="sex" label="性别" align="left" :formatter="sexFormat">
      </el-table-column>
      <el-table-column prop="phone" label="电话" align="left">
      </el-table-column>
      <el-table-column prop="address" label="地址" :show-overflow-tooltip="true" align="left">
      </el-table-column>
      <el-table-column prop="enableFlag" label="启用状态" :formatter="enableFlagFormat" align="left">
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template #default="scope">
          <el-button size="mini" type="text" @click="handleSelect(scope.$index,scope.row)">详情</el-button>
          <el-button size="mini" type="text" @click="handleUpdate(scope.$index,scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

vue3 中无法使用slot-scope的问题

vue2：上下对应，title是自己随便起的名字

1、定义一个普通的插槽，可以用div，任何标签

<div slot="title"></div>

2、定义一个element列表里面插槽的标签

<div slot="title" slot-scope="scope"></div>

vue3：上下对应，title是自己随便起的名字

1、注意，vue3中只能用template, # 等同于 slot=

<template #title></template>

2、注意，vue3中只能用template, # 等同于 slot=

<template #title="scope"></template>

?2、el-dialog实现

<el-dialog v-model="addOpen" class="diaStyle" style="height: 80vh; overflow-y: auto" :title="title">
      <el-form ref="ruleForm" :model="form" :inline="true" :rules="rules" label-width="80px" style="margin-bottom: 20px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="日期" prop="date" style="width: 100%;">
              <el-input v-model="form.date" type="text" placeholder="请输入日期" :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name" style="width: 100%;">
              <el-input v-model="form.name" type="text" placeholder="请输入姓名" :disabled="disabled" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex" style="width: 100%;">
              <el-select v-model="form.sex" placeholder="请选择性别" :disabled="disabled">
                <el-option v-for="item in sexOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="age" style="width: 100%;">
              <el-input v-model="form.age" type="text" placeholder="请输入年龄" :disabled="disabled" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="phone" style="width: 100%;">
              <el-input v-model="form.phone" type="text" placeholder="请输入联系方式" :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="启用状态" prop="enableFlag" style="width: 100%;">
              <el-radio-group v-model="form.enableFlag" :disabled="disabled">
                <el-radio v-for="dict in enableOption" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="地址" prop="address" style="width: 100%;">
              <el-input v-model="form.address" type="text" placeholder="请输入地址" :disabled="disabled" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-preventReClick="2000" v-if="confDisabled">保 存</el-button>
        <el-button @click="closeDialog">{{buttonName}}</el-button>
      </div>
    </el-dialog>

2.1、vue3 中无法使用:visible.sync的问题

:visible指的是属性绑定，表示弹框的显示隐藏。当:visible的值为ture的时候，弹框显示，当为false的时候，弹框隐藏。:visible.sync指的就是同步动态双向的来表示visible的值。

在vue3中取而代之的是v-model，将:visible.sync? 改为? v-model

2.2、submitForm提交校验form表单

<script setup>
import { toRefs, ref, reactive, unref} from 'vue'
/** 提交按钮 */
  let submitForm = () => {
    const ff = unref(ruleForm);
    if (!ff) return;
    ruleForm.value.validate((valid) => {
      if (valid) {
        if (form.value.id != undefined) {
          instance.proxy.$message({
            message: 'id为：' + form.value.id + '的数据修改成功',
            type: 'success',
          })
          addOpen.value = false;
          reset();
        } else {
          instance.proxy.$message({
            message: '新增成功',
            type: 'success',
          })
          addOpen.value = false;
          reset();
        }
      }
    });
</script>

3、分页实现

<el-pagination class="v3-page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
      :page-sizes="[5,10, 20, 30, 40]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

<script setup>
import { toRefs, ref, reactive} from 'vue'
const handleSizeChange = (val) => {
    console.log(`每页 ${val} 条`);
    pageSize.value = val
    getListData();
  }

  const handleCurrentChange = () => {
    console.log(`当前页: ${val}`);
    page.value = val
    getListData();
  }
</script>

vue3 Element-UI 插件 Pagination 显示为英文问题

在mains.js 里添加

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// en是英文 zh-cn 是中文
app.use(ElementPlus, {
? locale: zhCn,
})

4、$message提示消息

<script setup>
  import { getCurrentInstance } from 'vue'
  import { getTenantDatas } from '@/api/v3'
  //使用message
  const instance = getCurrentInstance()
  const { proxy } = getCurrentInstance();
      instance.proxy.$message({
        message: `操作成功`,
        type: 'success',
      })
</script>

5、监听

5.1普通监听

<script setup>
import { toRefs, ref, reactive, watch} from 'vue'
const count = ref(0)
watch(count, (newValue, oldValue) => {
    if (newValue) {
      instance.proxy.$message({
        message: `我侦听到了count状态的变化，当前值为${newValue},从而处理相关逻辑`,
        type: 'success',
      })
    }
  })
</script>

5.2深度监听

<script setup>
import { toRefs, ref, reactive, watch} from 'vue'
  const user = reactive({
    name: 'zs',
    age: 18,
  })
  //深度监听
  watch(
    user,
    (value) => {
      console.log(value)
      instance.proxy.$message({
        message: `我侦听到了user年龄的变化，当前值为${value.age},从而处理相关逻辑`,
        type: 'success',
      })
    },
    {
      // 深度监听，，，当ref的值是一个复杂数据类型，需要深度监听
      deep: true,
      immediate: true
    }
  )
</script>

6、onMounted钩子函数

<script setup>
import { toRefs, ref, reactive, onMounted} from 'vue'
  //注册周期钩子：钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码
  onMounted(() => {
    instance.proxy.$message({
      message: "生命周期函数：onMounted",
      type: 'success',
    })
  })
</script>

7、reactive 和 ref区别

1、reactive 和 ref 是 Vue 3 中的两种响应式数据绑定方式，ref 适用于简单的响应式数据，而 reactive 则适用于复杂对象或数组的响应式数据。

2、ref：使用 .value 属性来访问和修改值。

3、reactive：可以直接访问和修改对象或数组的属性或元素，而无需使用 .value。

8、父子组件相互调用

1、父组件

<template>

  <div id="example1" class="demo">
<child ref="childRef" :parentData="state" :parentFunction="myFunction" style="margin-top: 20px;" />
  </div>
</template>
<script setup>
  import { toRefs, ref, reactive, watch, unref, computed, onMounted } from 'vue'
  import child from './views/child.vue'
  import { getCurrentInstance } from 'vue'

  const state = reactive({
    patientInfo: null,
    ActiveIndex: 0,
    myData: '我是父组件里的属性',
    name: '孩子',
    age: '15',
    sex: '男',
  })
const myFunction = (item) => {
    instance.proxy.$message({
      message: '我是父组件里的方法',
      type: 'success',
    })
  }
  //调用子组件中的方法
  const childRef = ref(null);
  let handleChild = () => {
    childRef.value.changeData();
  }

2、子组件

<template>

    <div id="example1" class="demo" style="border: 1px solid blue">
        <el-form :model="dataForm" label-width="80px" style="margin-bottom: 20px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="解释" prop="myData" style="width: 100%;">
                        <el-input v-model="dataForm.myData" type="text" placeholder="请输入解释" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="name" style="width: 100%;">
                        <el-input v-model="dataForm.name" type="text" placeholder="请输入姓名" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="性别" prop="sex" style="width: 100%;">
                        <el-input v-model="dataForm.sex" type="text" placeholder="请输入性别" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄" prop="age" style="width: 100%;">
                        <el-input v-model="dataForm.age" type="text" placeholder="请输入年龄" />
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <el-button size="mini" type="primary" @click="handleClick()">触发</el-button>
    </div>
</template>

<script setup>
    import { toRefs, ref, reactive, watch, unref, defineExpose, computed } from 'vue'
    import { getCurrentInstance } from 'vue'
    //使用message
    const instance = getCurrentInstance()
    const { proxy } = getCurrentInstance();
    const props = defineProps({
        parentData: {
            type: Object,
            default: () => {
                return {}
            }
        },
        parentFunction: {
            type: Function,
            default: () => null,
        },
    })
    //计算属性computed函数
    const dataForm = computed(() => props.parentData);
    let handleClick = () => {
        //父组件中的方法
        props.parentFunction(dataForm);
    }
    //子组件定义方法供父组件调用
    const changeData = () => {
        instance.proxy.$message({
            message: '我是子组件里的方法',
            type: 'success',
        })
    }
    defineExpose({
        changeData,
    });

</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

3、效果

9、完整demo代码

?9.1、app.vue

<template>

  <div id="example1" class="demo">
    <el-row :gutter="10" style="margin-bottom: 10px">

      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="handleInsert">
          新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" size="mini" @click="handleChild">
          子组件调用
        </el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" :header-cell-style="{'text-align':'center'}">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="date" label="日期" align="center">
      </el-table-column>
      <el-table-column prop="name" label="姓名" align="left">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="right">
      </el-table-column>
      <el-table-column prop="sex" label="性别" align="left" :formatter="sexFormat">
      </el-table-column>
      <el-table-column prop="phone" label="电话" align="left">
      </el-table-column>
      <el-table-column prop="address" label="地址" :show-overflow-tooltip="true" align="left">
      </el-table-column>
      <el-table-column prop="enableFlag" label="启用状态" :formatter="enableFlagFormat" align="left">
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
        <template #default="scope">
          <el-button size="mini" type="text" @click="handleSelect(scope.$index,scope.row)">详情</el-button>
          <el-button size="mini" type="text" @click="handleUpdate(scope.$index,scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="v3-page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
      :page-sizes="[5,10, 20, 30, 40]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <!-- 添加修改对话框 -->
    <!--给el-dialog添加一个mpc-model-middle的class-->
    <el-dialog v-model="addOpen" class="diaStyle" style="" :title="title">
      <el-form ref="ruleForm" :model="form" :inline="true" :rules="rules" label-width="80px" style="margin-bottom: 20px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="日期" prop="date" style="width: 100%;">
              <el-input v-model="form.date" type="text" placeholder="请输入日期" :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名" prop="name" style="width: 100%;">
              <el-input v-model="form.name" type="text" placeholder="请输入姓名" :disabled="disabled" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="性别" prop="sex" style="width: 100%;">
              <el-select v-model="form.sex" placeholder="请选择性别" :disabled="disabled">
                <el-option v-for="item in sexOption" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄" prop="age" style="width: 100%;">
              <el-input v-model="form.age" type="text" placeholder="请输入年龄" :disabled="disabled" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="phone" style="width: 100%;">
              <el-input v-model="form.phone" type="text" placeholder="请输入联系方式" :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="启用状态" prop="enableFlag" style="width: 100%;">
              <el-radio-group v-model="form.enableFlag" :disabled="disabled">
                <el-radio v-for="dict in enableOption" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="地址" prop="address" style="width: 100%;">
              <el-input v-model="form.address" type="text" placeholder="请输入地址" :disabled="disabled" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-preventReClick="2000" v-if="confDisabled">保 存</el-button>
        <el-button @click="closeDialog">{{buttonName}}</el-button>
      </div>
    </el-dialog>
    <child ref="childRef" :parentData="state" :parentFunction="myFunction" style="margin-top: 20px;" />
    <div style="border: 2px solid #f708bb;height: 80px;text-align: center;margin-top: 10px">
      <el-button size="mini" type="primary" @click="changCount" style="margin-top: 5px;display: flex;justify-content: flex-start;margin-left: 5px;">更改count的值</el-button>
      <div>{{ count }}</div>
      <div>姓名：{{ user.name }}，年龄：{{user.age}}岁</div>
    </div>
    <div style="border: 2px solid #008000;height: 160px;text-align: center;margin-top: 10px">暂时没想出来写点啥</div>
  </div>
</template>

<script setup>
  import { toRefs, ref, reactive, watch, unref, computed, onMounted } from 'vue'
  import child from './views/child.vue'
  import { getCurrentInstance } from 'vue'
  import { getTenantDatas } from '@/api/v3'
  //使用message
  const instance = getCurrentInstance()
  const { proxy } = getCurrentInstance();
  const data = reactive({

  })
  const count = ref(0)
  const user = reactive({
    name: 'zs',
    age: 18,
  })
  function changCount() {
    count.value++
    user.age++
  }
  watch(count, (newValue, oldValue) => {
    if (newValue) {
      instance.proxy.$message({
        message: `我侦听到了count状态的变化，当前值为${newValue},从而处理相关逻辑`,
        type: 'success',
      })
    }
  })
  //深度监听
  watch(
    user,
    (value) => {
      console.log(value)
      instance.proxy.$message({
        message: `我侦听到了user年龄的变化，当前值为${value.age},从而处理相关逻辑`,
        type: 'success',
      })
    },
    {
      // 深度监听，，，当ref的值是一个复杂数据类型，需要深度监听
      deep: true,
      immediate: true
    }
  )
  //注册周期钩子：钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码
  onMounted(() => {
    instance.proxy.$message({
      message: "生命周期函数：onMounted",
      type: 'success',
    })
  })
  const state = reactive({
    patientInfo: null,
    ActiveIndex: 0,
    myData: '我是父组件里的属性',
    name: '孩子',
    age: '15',
    sex: '男',
  })
  //reactive 和 ref 是 Vue 3 中的两种响应式数据绑定方式，ref 适用于简单的响应式数据，而 reactive 则适用于复杂对象或数组的响应式数据。
  //ref：使用 .value 属性来访问和修改值。
  //reactive：可以直接访问和修改对象或数组的属性或元素，而无需使用 .value。
  let tableData = reactive([])
  // 数据相关 ?sortProperty=createdTime&sortOrder=DESC&pageSize=10&page=0
  const total = ref(0)
  const sortProperty = ref('createdTime')
  const sortOrder = ref('DESC')
  const pageSize = ref(2)
  const page = ref(1)
  // 获取数据的方法
  const getListData = async () => {
    instance.proxy.$message({
      message: "获取数据的方法",
      type: 'success',
    })
    const result = await getTenantDatas({
      sortProperty: sortProperty.value,
      sortOrder: sortOrder.value,
      pageSize: pageSize.value,
      page: page.value - 1
    })
    tableData = result
    total.value = result.length
  }
  const handleSizeChange = (val) => {
    console.log(`每页 ${val} 条`);
    pageSize.value = val
    getListData();
  }

  const handleCurrentChange = () => {
    console.log(`当前页: ${val}`);
    page.value = val
    getListData();
  }

  // 执行方法
  getListData()
  //表单校验
  let rules = ref({
    date: [
      { required: true, message: "日期不能为空", trigger: "blur" },
    ],
    name: [
      { required: true, message: "名称不能为空", trigger: "blur" },
    ],
    address: [
      { required: true, message: "地址不能为空", trigger: "blur" },
    ],
    enableFlag: [
      { required: true, message: "启用状态不能为空", trigger: "blur" },
    ],
    age: [
      { required: true, message: "启用状态不能为空", trigger: "blur" },
    ],
    sex: [
      { required: true, message: "启用状态不能为空", trigger: "blur" },
    ],
  });
  // 详情
  let form = ref({
  });
  const ruleForm = ref(null); //表单
  let addOpen = ref(false);
  let disabled = ref(false);
  let buttonName = ref("取 消");
  let confDisabled = ref(false);
  let title = ref("");
  let handleSelect = (index, row) => {
    form.value = row;
    disabled.value = true;
    addOpen.value = true;
    confDisabled.value = false;
    buttonName.value = "关 闭";
    title.value = "查看详情"
  }
  //修改
  let handleUpdate = (index, row) => {
    form.value = row;
    disabled.value = false;
    addOpen.value = true;
    confDisabled.value = true;
    buttonName.value = "取 消";
    title.value = "修改信息"
  }
  //新增
  let handleInsert = () => {
    disabled.value = false;
    addOpen.value = true;
    confDisabled.value = true;
    buttonName.value = "取 消";
    title.value = "新增信息"
  }
  /** 提交按钮 */
  let submitForm = () => {
    const ff = unref(ruleForm);
    if (!ff) return;
    ruleForm.value.validate((valid) => {
      if (valid) {
        if (form.value.id != undefined) {
          instance.proxy.$message({
            message: 'id为：' + form.value.id + '的数据修改成功',
            type: 'success',
          })
          addOpen.value = false;
          reset();
        } else {
          instance.proxy.$message({
            message: '新增成功',
            type: 'success',
          })
          addOpen.value = false;
          reset();
        }
      }
    });
  };
  //关闭弹窗
  let closeDialog = () => {
    addOpen.value = false;
    reset();
  }

  let reset = () => {
    form.value = {}
  }

  let ids = ref(undefined);
  let banchParams = ref([]);
  //多选框选中数据
  let handleSelectionChange = (selection) => {
    ids.value = selection.map(item => item.id)
    banchParams.value = selection
    console.log(ids.value)
  }
  let enableOption = [
    {
      "label": "启用",
      "value": "0"
    }, {
      "label": "停用",
      "value": "1"
    }
  ];
  let enableFlagFormat = (item) => {
    return format(enableOption, item.enableFlag);
  };
  // 回显
  let format = (datas, value) => {
    var actions = [];
    Object.keys(datas).some((key) => {
      if (datas[key].value == ('' + value)) {
        actions.push(datas[key].label);
        return true;
      }
    })
    return actions.join('');
  }
  let sexOption = [
    {
      "label": "男",
      "value": "0"
    }, {
      "label": "女",
      "value": "1"
    }, {
      "label": "未知",
      "value": "2"
    }
  ];
  let sexFormat = (item) => {
    return format(sexOption, item.sex);
  };

  const myFunction = (item) => {
    instance.proxy.$message({
      message: '我是父组件里的方法',
      type: 'success',
    })
  }
  //调用子组件中的方法
  const childRef = ref(null);
  let handleChild = () => {
    childRef.value.changeData();
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

  .demo {
    border: 2px solid #ff0000;
    padding: 20px;
  }

  .v3-page {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
  }
  .dialog-footer{
    display: flex;
    justify-content: flex-end;
  }
</style>

9.2、child.vue

<template>

    <div id="example1" class="demo" style="border: 1px solid blue">
        <el-button size="mini" type="primary" @click="handleClick()" style="margin-bottom: 10px;display: flex;justify-content: flex-start;margin-left: -15px;">触发父组件方法</el-button>
        <el-form :model="dataForm" label-width="80px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="解释" prop="myData" style="width: 100%;">
                        <el-input v-model="dataForm.myData" type="text" placeholder="请输入解释" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="name" style="width: 100%;">
                        <el-input v-model="dataForm.name" type="text" placeholder="请输入姓名" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="性别" prop="sex" style="width: 100%;">
                        <el-input v-model="dataForm.sex" type="text" placeholder="请输入性别" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄" prop="age" style="width: 100%;">
                        <el-input v-model="dataForm.age" type="text" placeholder="请输入年龄" />
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
    </div>
</template>

<script setup>
    import { toRefs, ref, reactive, watch, unref, defineExpose, computed } from 'vue'
    import { getCurrentInstance } from 'vue'
    //使用message
    const instance = getCurrentInstance()
    const { proxy } = getCurrentInstance();
    const props = defineProps({
        parentData: {
            type: Object,
            default: () => {
                return {}
            }
        },
        parentFunction: {
            type: Function,
            default: () => null,
        },
    })
    //计算属性computed函数
    const dataForm = computed(() => props.parentData);
    let handleClick = () => {
        //父组件中的方法
        props.parentFunction(dataForm);
    }
    //子组件定义方法供父组件调用
    const changeData = () => {
        instance.proxy.$message({
            message: '我是子组件里的方法',
            type: 'success',
        })
    }
    defineExpose({
        changeData,
    });

</script>

<style>
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

package.json中设置rules

"rules": {
      "no-undef": "off",
      "no-unused-vars": "off",
      "vue/multi-word-component-names": "off"
    }