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

相关推荐
paopaokaka_luck1 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9492 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_2 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路4 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任5 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴5 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔5 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js