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=