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

相关推荐
Hilaku几秒前
深入CSS层叠的本质:@layer如何优雅地解决样式覆盖与!important滥用问题
前端·css·html
天天扭码4 分钟前
AI时代,前端如何处理大模型返回的多模态数据?
前端·人工智能·面试
每天开心6 分钟前
一文教你掌握事件机制
前端·javascript·ai编程
LeeAt13 分钟前
真的!真的就一句话就能明白this指向问题
前端·javascript
阳火锅14 分钟前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
hahala233331 分钟前
ESLint 提交前校验技术方案
前端
夕水1 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了1 小时前
实现一个简单的Vue响应式
前端·vue.js
独立开阀者_FwtCoder1 小时前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
Cacciatore->1 小时前
React 基本介绍与项目创建
前端·react.js·arcgis