vue3+ts/js：父传子、子传父（父子通信），调用组件； Identifier ‘RunDrawer‘ has already been declared.错误的解决

hello~今天写了一个vue3用ts的页面，需要用到下钻，为了方便代码的维护，浅浅封装了一下；

先说一下子组件的写法，正常的写一个表格，加上搜索条件~

<template>
  <el-drawer v-model="drawer" size="80%" direction="btt" title="数据列表">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="区县">
        <el-input v-model="formInline.regionName" placeholder="请输入区县" />
      </el-form-item>
      <el-form-item label="公司名称">
        <el-input v-model="formInline.companyName" placeholder="请输入公司名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="resetting">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="regionName" label="区县名称" />
      <el-table-column prop="companyName" label="公司名称" />
    </el-table>
  </el-drawer>
</template>

<script lang="ts" setup>
import {  ref, reactive } from "vue";//引入
const props = defineProps({
  tableData: Array,//子接收数据
});

const drawer = ref(false);//定义窗户出现
const formInline = reactive({//定义搜索表单，
  regionName: "",
  heatstationName: ""
});

const open = () => {//子组件打开的方法
  drawer.value = true;
};
//父组件要想调用子组件的方法，必须得先让子组件把方法推出去
defineExpose({
  open
});
const emit = defineEmits(["clickToFather"]);
const onSubmit = () => {//子组件搜索，调用父组件的方法，要用emit,一定在上面调用哦
  emit("SubmitSearch", formInline);
};
</script>

<style></style>

子组件的ts部分，包含了接收用defineProps，被调用的方法要推出去defineExpose（{方法}），子改变父组件（子调用父）用const emit = defineEmits(["clickToFather"])定义，用

emit("SubmitSearch", formInline)调用和传值。

<script lang="ts" setup>
import {  ref, reactive } from "vue";//引入
const props = defineProps({
  tableData: Array,//子接收数据
});

const drawer = ref(false);//定义窗户出现
const formInline = reactive({//定义搜索表单，
  regionName: "",
  heatstationName: ""
});

const open = () => {//子组件打开的方法
  drawer.value = true;
};
//父组件要想调用子组件的方法，必须得先让子组件把方法推出去
defineExpose({
  open
});
const emit = defineEmits(["clickToFather"]);
const onSubmit = () => {//子组件搜索，调用父组件的方法，要用emit,一定在上面调用哦
  emit("SubmitSearch", formInline);
};
</script>

现在是父组件~

import RunDrawering from "./components/RunDrawer.vue";//引入不需要注册，直接使用。

直接使用

 <RunDrawering ref="rundrawers" :tableData="tableData" @SubmitSearch="SubmitSearch" />

因为子组件是个弹出层，所以我这边直接点按钮调用子组件的方法，所以给子组件顶一个一个ref

const rundrawers = ref<any>();//定义子组件的ref，不定义会出错
const RunDrawer = () => {
  rundrawers.value.open();//调用子组件的方法
  baseService.get("接口", { page: 1, limit: 100 }).then((res) => {
    tableData.value = res.data.list;//这里调取了接口传值
  });
};

父接收了子组件的方法调用，传参是这样传的

const SubmitSearch = (formInline: Object) => {
  baseService.get("接口", { page: 1, limit: 100, regionName: formInline.regionName, companyName: formInline.companyName }).then((res) => {
    tableData.value = res.data.list;
  });
};

我在这里出现一个错误，

Identifier 'RunDrawer' has already been declared.

查找了是因为我组件名字定义重复了，大家一定要注意~

vue3+ts/js：父传子、子传父（父子通信），调用组件； Identifier ‘RunDrawer‘ has already been declared.错误的解决

猜你喜欢