您现在的位置是：网站首页> 编程资料编程资料

vue3 使用setup语法糖实现分类管理功能_vue.js_

2023-05-24 400人已围观

简介 vue3 使用setup语法糖实现分类管理功能_vue.js_

setup语法糖简介

直接在 script 标签中添加 setup 属性就可以直接使用 setup 语法糖了。

使用 setup 语法糖后，不用写 setup 函数，组件只需要引入不需要注册，属性和方法也不需要再返回，可以直接在 template 模板中使用。

setup语法糖中新增的api

  • defineProps：子组件接收父组件中传来的 props
  • defineEmits：子组件调用父组件中的方法
  • defineExpose：子组件暴露属性，可以在父组件中拿到

模块简介

本次模块使用 vue3+element-plus 实现一个新闻站的后台分类管理模块，其中新增、编辑采用对话框方式公用一个表单。

分类模块路由

添加分类模块的路由

import { createRouter, createWebHistory } from "vue-router"; import Layout from "@/views/layout/IndexView"; const routes = [ { path: "/sign_in", component: () => import("@/views/auth/SignIn"), meta: { title: "登录" }, }, { path: "/", component: Layout, children: [ { path: "", component: () => import("@/views/HomeView"), meta: { title: "首页" }, }, // 分类管理 { path: "/categories", component: () => import("@/views/categories/ListView"), meta: { title: "分类列表" }, }, ], }, ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, }); export default router;

分类列表组件

在 views/categories/ListView.vue 中

获取分类列表数据

分类表单组件

1、新建 src/views/categories/components/CategoryForm.vue

2、在 categories/ListView.vue 中引入上述表单组件

ref=“dialogShow”：给表单对话框起别名

3、给新增、编辑按钮分别绑定事件，点击后弹出对话框

新增编辑
// 点击新增按钮触发子组件的 showForm 方法，并传参 create，代表新增 const dialogShow = ref(null); const handleCreate = async () => { dialogShow.value.showForm("create"); }; // 点击编辑按钮钮触发子组件的 showForm 方法，并传参 edit 和编辑所需的 id 值，代表编辑 const handleEdit = async (row) => { dialogShow.value.showForm("edit", { id: row.id }); };

4、在表单组件中

测试：此时点击新增或编辑按钮，发现无法触发 showForm 方法。原因在于我们要在父组件中调用子组件的方法，需导出子组件的方法后才能调用

此时再次点击新增或编辑按钮，发现已经拿到了 type 和 data 的值了。

5、完成新增和编辑的对话框正常显示

// 定义表单类型的默认值为 create const formType = ref("create"); // 完成新增和编辑正常对话框显示 const showForm = async (type, data) => { dialogFormVisible.value = true; formType.value = type; if (type == "create") { form.value = {}; } else { fetchCategory(data.id).then((res) => { form.value = res.data.category; }); } };

对话框字体显示

根据 formType 的值判断显示新增或编辑

完成新增和编辑功能

import { createCategory, fetchCategory, updateCategory, } from "@/api/categories"; import { ElMessage, ElNotification } from "element-plus"; // 表单提交 const submitForm = async (formEl) => { await formEl.validate(async (valid) => { if (valid) { let res; try { if (formType.value == "create") { res = await createCategory(form.value); } else { res = await updateCategory(form.value.id, form.value); } if (res.code === 20000) { ElNotification({ title: "成功", message: res.message, type: "success", }); dialogFormVisible.value = false; } } catch (e) { if (e.Error) { ElMessage.error(e.Error); } } } }); };

当新增或编辑表单提交后，新的数据要同步渲染到页面，根据思路，我们需要调用父组件的 init 方法即可，所以这里涉及到子组件调用父组件的方法

修改父组件引用子组件的代码，增加 @init 事件，绑定 init 方法

在子组件中调用，注意注释中的代码

// eslint-disable-next-line no-undef const emit = defineEmits(["init"]); // 引入父组件的 init 方法 const submitForm = async (formEl) => { await formEl.validate(async (valid) => { if (valid) { let res; try { if (formType.value == "create") { res = await createCategory(form.value); } else { res = await updateCategory(form.value.id, form.value); } if (res.code === 20000) { ElNotification({ title: "成功", message: res.message, type: "success", }); dialogFormVisible.value = false; emit("init"); // 调用 init } } catch (e) { if (e.Error) { ElMessage.error(e.Error); } } } }); };

到此这篇关于vue3 使用setup语法糖实现分类管理的文章就介绍到这了,更多相关vue3 setup语法糖内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网