vue3 使用setup语法糖实现分类管理

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 中

<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>内容管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider />

    <el-button type="primary">新增</el-button>

    <el-table :data="categories" style="width: 100%" class="set-top">
      <el-table-column prop="id" label="编号" width="180" />
      <el-table-column label="名称" width="180">
        <template #default="scope">
          <el-tag>{
  { scope.row.name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="排序" width="180">
        <template #default="scope">
          {
  { scope.row.sort }}
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="180">
        <template #default=