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{}包裹,深度选择器

相关推荐
千叶寻-16 分钟前
package.json详解
前端·vue.js·react.js·webpack·前端框架·node.js·json
zz-zjx35 分钟前
Web接入层的“铁三角”---防盗链、反向代理,负载均衡(nginx)
前端·nginx·负载均衡
C+ 安口木37 分钟前
CSS通用优惠券样式
前端·css
小趴菜82271 小时前
安卓人机验证View
android·java·前端
闲人编程1 小时前
2025年,如何选择Python Web框架:Django, Flask还是FastAPI?
前端·后端·python·django·flask·fastapi·web
光影少年2 小时前
react打包优化和配置优化都有哪些?
前端·react.js·掘金·金石计划
Aoda2 小时前
企业级项目结构设计的思考与实践 —— 以 PawHaven 为例
前端·架构
若无_2 小时前
深入理解 Vue 中的 reactive 与 ref:响应式数据的两种核心实现
前端·vue.js
玄魂2 小时前
一键生成国庆节祝福海报,给你的朋友圈上点颜色
前端·javascript·数据可视化
彼日花2 小时前
前端新人30天:从手足无措到融入团队
前端·程序员