byebukesi的博客

不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。

如果在组件内部需要访问当前路由的信息，最佳实践是使用 const router = useRouter();来获取路由实例，然后通过 router.currentRoute 或其他属性来访问路由信息。这样可以确保在路由实例被正确初始化后再去访问路由信息，避免可能的未定义错误。

我们经常在处理表单时，一般用弹窗类表单，不会存在此类问题，因为弹窗的打开关闭已经实现重新渲染弹窗组件。但是如果表单和列表在同一页面，你希望在表单编辑完成保存后，单独刷新页面的下半部分详情组件，这时需要主动使子组件重新渲染，以便拿到更新后的值。

在setup语法糖中，当一个父组件循环渲染子组件时，子组件中定义一个双向绑定的变量，如何在父组件获取该变量。（获取函数同理）

一般遇到父组件给子组件传值，props必不可少，但是在vue3中，有的人会遇到子组件接收到props中的值不会更新的情况，比如子组件的aa值并不会随着父组件中fatherData的变化而变化，甚至如果你的父组件中fatherData没有赋初始值，在子组件中props.sonData直接会是undifined。

vue3+ts封装通用组件时，需要传入需要的props，然后使用动态属性来控制组件的渲染。这个过程中最可能会遇到TS的类型校验报错。如果是使用JS，那么封装过程一气呵成，将来类型不对了或者数据为空了都会在控制台报错然后调试，但是TS的特点就是让你在写代码的时候把类型定好。

之前介绍了vue2如何引入tinymce5，也介绍了很多tinymce的技巧和插件以及自定义插件。也讲了我最近在升级系统技术栈，那既然从vue2+webpack+js升级到了vue3+vite+ts，那编辑器也应该紧跟潮流升级到tinymce6（V6.7.0）。tinymce6将一部分基础的插件放进了编辑器核心代码中，即不用再外部引入了，这增加代码的间接性，但也导致很多报错，后面一一讲解。网上也有讲解vue3如何引入tinymce的，但是都不是很全，归根结底没有涉及原理。

一般vue开发的项目都会搭配饿了么组件库使用，里面的图标够小项目的需求了，链接:实在不行，阿里妈妈开发的矢量图标库IconFont里绝对可以找你需要的图标。链接:。但是，当你的项目需要动态加载图标时，或是遇到“用户自定义目录时可选择图标”这样的需求时，你就需要封装一个本地的svg图标库了，或者你有幸担起了公司里架构师的位置时，封装各种组件库也是必定会遇到的问题。下面介绍的方法无需安装任何插件，优点是操作简单，当然也有缺点，相对没有特别灵活。

Element Plus导航栏同时展开open和select方法的问题

element plus实现transfer穿梭框右侧数据上下移动的功能

报错是该组件没有导出，即"components/details/index.vue"has no default export.

tinymce中自定义插件，包括注册菜单，更改图标，插件编写

当你用router-view渲染页面时，大型项目难免用到路由传参，好处就不多说了。但是，使用过程中会发现，只改变路由传递的参数而没有改变路由其他地址的话，页面是不会重新加载的。原理是当使用动态路由匹配传递参数时 , 默认会让子路由中的组件页面"复用" , 此时子路由中的页面是不会被销毁的 , 页面的data mounted(){} 等钩子函数不再执行 , 导致路由传递的参数变了 , 但是路由界面不更新。

[Vue warn]: Invalid prop: custom validator check failed for prop "index"的报错解决方案

是vue-router的原因。导航栏重复点击同一模块时，会弹出这个报错，一般情况下不影响功能，但是如果你的页面逻辑里有刷新页面相关的设置时，也会影响功能，可能导致页面数据拿不到。PS：只有当vue-router版本为3.0以上时会有这个报错，所以一种解决方法是将vue-router改为3.0版本，但是不推荐这种做法，控制版本并不是一个好的解决方案。