hola ~ Hoy escribí una página vue3 usando ts, que necesita ser desglosada Para facilitar el mantenimiento del código, lo encapsulé ligeramente;
Permítanme hablar primero sobre el método de escritura de los subcomponentes, escribir un formulario normalmente y agregar condiciones de búsqueda ~
<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>
La parte ts del componente secundario incluye defineProps para recibir, y el método llamado debe iniciarse para definir Expose ({método}), y el elemento secundario cambia el componente principal (el elemento secundario llama al elemento principal) para definir con const emit = defineEmits([ "clickToFather"]), utilice
emit("SubmitSearch", formInline) llama y pasa valores.
<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>
Ahora es el componente principal ~
import RunDrawering from "./components/RunDrawer.vue";//引入不需要注册,直接使用。
Usar directamente
<RunDrawering ref="rundrawers" :tableData="tableData" @SubmitSearch="SubmitSearch" />
Debido a que el subcomponente es una capa emergente, hago clic directamente en el botón para llamar al método del subcomponente, así que le doy una referencia al subcomponente
const rundrawers = ref<any>();//定义子组件的ref,不定义会出错
const RunDrawer = () => {
rundrawers.value.open();//调用子组件的方法
baseService.get("接口", { page: 1, limit: 100 }).then((res) => {
tableData.value = res.data.list;//这里调取了接口传值
});
};
El padre recibe la llamada al método del componente hijo y los parámetros se pasan así
const SubmitSearch = (formInline: Object) => {
baseService.get("接口", { page: 1, limit: 100, regionName: formInline.regionName, companyName: formInline.companyName }).then((res) => {
tableData.value = res.data.list;
});
};
Estoy recibiendo un error aquí,
Ya se ha declarado el identificador 'RunDrawer'.
Busqué porque se repetía la definición del nombre de mi componente, todos deben prestar atención~