【Vue3大事件 | 项目笔记】第四天

前言：Vue3大事件项目是一个基于Vue3的PC端项目，本系列文章我将总结我在这个项目中学到的知识点，写项目笔记。如果你正好在学或巩固Vue3，希望本系列文章可以帮助到你。

【Vue3大事件 | 项目笔记】第四天

- 今日完结：
- 今日收获：
- - 1.Vue3中的v-model语法糖
  - [2.dayjs - 时间格式化](#2.dayjs - 时间格式化)
  - 3.语言国际化处理
- 杂项知识点：
- 总结：

今日完结：

文章管理静态结构搭建
文章分类组件封装
文章列表分页渲染
处理文章列表搜索重置
封装抽屉组件

今日收获：

1.Vue3中的v-model语法糖

父组件

javascript 复制代码

 <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（反向更新）。

子组件

javascript 复制代码

<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.封装成一个方法

javascript 复制代码

import {dayjs} from 'element-plus'

export const formatTime = (time) => dayjs(time).format('YYYY年MM月DD日')

2.在组件里面引用

javascript 复制代码

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 官方的中文（简体）语言包；

javascript 复制代码

<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 内部，意味着整个项目的所有页面（路由匹配的组件）都会应用中文配置。

javascript 复制代码

<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 选项，简化了自定义组件双向绑定的配置成本。

总结：

今天学到了很多有用的小知识点，也巩固了组件封装，很充实，明天继续。

如果我的内容对你有帮助，请点赞，评论，收藏。创作不易，大家的支持就是我坚持下去的动力！