前言：Vue3大事件项目是一个基于Vue3的PC端项目，本系列文章我将总结我在这个项目中学到的知识点，写项目笔记。如果你正好在学或巩固Vue3，希望本系列文章可以帮助到你。
【Vue3大事件 | 项目笔记】第四天
-
- 今日完结：
- 今日收获：
-
- 1.Vue3中的v-model语法糖
- 2.dayjs – 时间格式化
- 3.语言国际化处理
- 杂项知识点：
- 总结：
今日完结：
- 文章管理静态结构搭建
- 文章分类组件封装
- 文章列表分页渲染
- 处理文章列表搜索重置
- 封装抽屉组件
今日收获：
1.Vue3中的v-model语法糖
父组件
<channel–select v–model="cateId.cate_id"></channel–select>
在这个中v-model="cateId.cate_id"就是 :modelValue="cateId.cate_id" + @update:modelValue="新值赋值" 的简写
:modelValue：把父组件的 cateId.cate_id 传给子组件 channel-select（单向传值）； @update:modelValue：监听子组件触发的 update:modelValue 事件，接收新值并更新父组件的 cateId.cate_id（反向更新）。
子组件
<script setup>
// 1. 接收父组件传递的 modelValue（v-model 绑定的核心 props）
defineProps({
modelValue: {
type: [Number, String]
}
})
// 2. 定义触发更新的事件（v-model 反向更新的核心 emit）
const emit = defineEmits(['update:modelValue'])
</script>
<template>
<!— 3. v–model 语法糖：等价于 :modelValue + @update:modelValue —>
<!— 替代原有的 :modelValue + @update:modelValue 手动绑定 —>
<el–select
v–model="modelValue"
@change="emit('update:modelValue', $event)"
>
…
</el–select>
</template>
2.dayjs – 时间格式化
dayjs 库是基于 Element Plus 内置的（轻量级的时间处理库，替代 Moment.js），它的作用是把原始时间数据（如时间戳、ISO 字符串）转换成人类易读的格式（YYYY年MM月DD日）。
步骤： 1.封装成一个方法
import {dayjs} from 'element-plus'
export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')
2.在组件里面引用
import {formatTime} from '@/utils/format.js'
…
<template #default="{row}">
{{formatTime(row.pub_date)}}
</template>
3.语言国际化处理
背景：Element Plus 内置了多语言包，默认可能是英文 / 浏览器语言，通过 el-config-provider 全局配置语言包，统一组件的文本显示；所有我们用到了Element Plus组件库，想要其中的英文 / 浏览器语言变成中文，就要进行相应的处理
语言包导入：import zh from ‘element-plus/es/locale/lang/zh-cn.mjs’ 导入 Element Plus 官方的中文（简体）语言包；
<script setup>
import zh from 'element-plus/es/locale/lang/zh-cn.mjs'
</script>
全局配置组件：<el-config-provider :locale="zh"> 是 Element Plus 提供的全局配置组件，通过 locale 属性传入语言包，其内部的所有 Element Plus 组件都会继承该语言配置； 作用域覆盖：<router-view /> 嵌套在 el-config-provider 内部，意味着整个项目的所有页面（路由匹配的组件）都会应用中文配置。
<template>
<!— 国际化处理 —>
<el–config–provider :locale="zh">
<router–view />
</el–config–provider>
</template>
<style scoped>
</style>
杂项知识点：
v-model语法糖在Vue3和Vue2中的区别
1.Vue3 废弃了 Vue2 的 value/input 默认绑定，改用 modelValue/update:modelValue，更语义化； 2.Vue3 原生支持多 v-model（无需 .sync），自定义组件用法更统一； 3.Vue3 去掉了 model 选项，简化了自定义组件双向绑定的配置成本。
总结：
今天学到了很多有用的小知识点，也巩固了组件封装，很充实，明天继续。
如果我的内容对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力！ 
