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.v-model 为 v-model:modelValue和@update:modelValue 的简写，传递时通过：modelValue来接受，触发事件时通过modelValue来触发
2.标签里面的插槽会覆盖外层标签的插槽。
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{}包裹，深度选择器