vue函数式组件进行i18n国际化处理

CSDN话题挑战赛第1期
活动详情地址：https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f

最近再给CRM系统做国际化处理，前端技术栈（vue + antd），国际化用的是vue-i18n。顺便给大家分享一下命名由来，为什莫叫 i18n ，这个还挺有意思。

i和n来自国际化的英文单词（internationalization）的简写，而18是i和n 在英文字母表的中间差了正好18个字母，SO… ,加起来 就是 i，18，n 名字的由来了。

///回归正题，先看一下问题背景，

问题背景

对于vue中的函数式组件如何让进行国际化处理? 在对系统asider部分进行国际化处理时，发现使用的antd中的单文件递归菜单，而a-sub-menu 使用的是函数式组件。

那么什么是函数式组件呢？

概念

函数式堪称"三无"。

1. 无生命周期
2. 无状态管理
3. 无this上下文

怎么用呢？
通过 props 传递的数据, 并将其渲染出来

给组件打上 "functional" 标记, 即得函数式组件。

当然了还有其他方式，这里不做过多叙述

因为函数式组件只是函数, 所以性能开销很低, 关于vue性能优化9法中有一段就是利用该特性进行优化。

实践

单文件写法:

{{ $t(tag.title) }}

在函数式组件中呢，在无this的情况，通过filter指令来间接的完成，全部实现方法已经下方的总结 详细给出具体实现方法。

附详细实现代码：

titleI18n指令：

generateTitle函数

i18n目录下的index.js

总结

通过自定义过滤器方法，也算是实现了函数式组件中的内容对国际化的处理，欢迎各位批评指正~