vue3项目开发第二篇

vue3项目开发

页面基本架子 Page Container,基本结构样式,用到了el-card组件

考虑到多个页面复用,封装成组件(父传子的形式),1.用props定制标题,2.默认插槽default定制主体内容 3.具名插槽extar定制头部额外的按钮

js 复制代码
子组件中定义:
<script setup>
defineProps({
    title:{
        required:true,
        type:string
    }
})
</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>{{ title }}</span>
                <div calss="extra">
                    <slot name="extra"></slot>
              ...
</template>
js 复制代码
父组件:
<template>
    <page-container title="文章分类">
        <template #extra>
            <el-button type="primary">添加分类</el-button>

</template>

加载中图片

j 复制代码
页面空值  <template #emptys>
js 复制代码
const loading=ref(false)
v-loading="loading"、
loading.value=true
在发送请求
loading.value=false

<div v-loading="loading">

对于编辑和添加回显的操作

js 复制代码
思路:利用每行的数据的id,
const isEdit = formModel.value.id
if(isEdit){
await----(formModel.value)
}
---

小插一段,接口封装方式

1.在api文件中封装相应接口请求函数 2.在对应的父、子组件中导入这个方法,在方法中异步调用这个函数,之后应该重新渲染,方法里接着调用get的接口请求函数

js 复制代码
如果设置中文,在app.vue根组件中用
<el-config-provider :locale="zh"> </el-config-provider>包裹<router-view>即可

插个小知识点

  1. 1.v-model 为 v-model:modelValue和@update:modelValue 的简写,传递时通过:modelValue来接受,触发事件时通过modelValue来触发
  2. 2.标签里面的插槽会覆盖外层标签的插槽。
  3. 3.()=>{ 里面需要加return }<===>()=> 不需要加return

封装抽屉组件

添加和编辑,可以共用一个抽屉,将抽屉封装成一个组件,组件对外暴露一个方法open,基于open的参数,初始化表单数据,判断区分是添加还是编辑 1.open({}) =>添加操作,无数据为添加表单 2.open({{id:...}) =>编辑操作,编辑表单回显

js 复制代码
具体实现:
1.封装一个子组件,用于展示抽屉组件,别忘记:
defineExpress({
    open
})------把方法暴露出去

2.在父组件中用ref绑定:
const articleEditRef =ref()
<article-edit ref="articleEditRef"></article-edit>

3.在父组件中,创建添加和编辑的方法,绑定在添加和编辑的按钮上:
const onAddArticle =()=>{
articleEditRef.value.open({})
}
const onEditArticle=(row)=>{
articleEditRef.value.open(row)
}

插个小点

在css样式中,若组件已经封装好,还想修改里面的样式,用deep{}包裹,深度选择器

相关推荐
半生过往33 分钟前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
程序员包打听35 分钟前
Vitest 4.0 重磅发布:Browser Mode 正式稳定,前端测试进入新纪元
前端
BumBle36 分钟前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
前端
星链引擎40 分钟前
大语言模型的技术突破与稳定 API 生态的构建
前端
还是大剑师兰特40 分钟前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle40 分钟前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
玉宇夕落40 分钟前
HTML5 音乐敲击乐静态界面
前端
海在掘金6112741 分钟前
告别"拼写错误":TS如何让你的代码"字字精准"
前端
用户479492835691541 分钟前
什么是XSS攻击,怎么预防,一篇文章带你搞清楚
前端·javascript·安全
摸着石头过河的石头42 分钟前
深入理解JavaScript事件流:从DOM0到DOM3的演进之路
前端·javascript·性能优化