摘要：
背景 在做管理台项目时，我们会经常使用到表单+表格+弹窗表单的组合，以完成对数据的增、删、查、改。 在vue2+elementui项目中，使用弹窗dialog+表单form，实现对数据的添加和修改。 每次关闭弹窗时，使用resetFields方法对表单进行重置。 下一次打开弹窗时， 如果是添加数据， 阅读全文
摘要：
以下是一些 Pinia 的其他高阶功能： storeToRefs()：响应式解构仓库，保证解构出来的数据是响应式的数据。 状态持久化：Pinia 并没有内置的状态持久化功能，但你可以使用第三方库或自定义插件来实现状态的持久化。例如，你可以使用 localStorage 或 sessionStorag 阅读全文
摘要：
温馨提示：本文以vue3+vite+ts举例，vite配置和ts语法侧重较少，比较适合有vuex或者vue基础的小伙伴们儿查阅。 安装pinia yarn yarn add pinia npm npm install pinia pnpm pnpm add pinia 1-开始 方式一：在main. 阅读全文
摘要：
在vue3中，可以使用vue3的API `defineExpose()`函数结合`ref`或者`$parent`，实现父子组件数据的传递。 # 子组件向父组件传递数据`defineExpose()`和`ref` - 子组件：通过`defineExpose()` 函数，向外暴露响应式数据或者方法 `` 阅读全文
摘要：
# 背景 通常情况下，当我们需要从父组件向子组件传递数据时，会使用 **props**。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦： ! 阅读全文
摘要：
# 背景 再很多场景中，我们可能想在子组件中修改父组件的数据，但事实上，vue不推荐我们这么做，因为数据的修改不容易溯源。 ## Vue2写法 在vue2中，我们使用`.sync`修饰符+自定义事件`'update:xxx'`，来使父子组件数据同步。 ```html // 父组件 我是父组件，我有{ 阅读全文
摘要：
> 优雅解决方案在最下面，小伙伴们儿可以直接前往 😊 > # 背景 在vue3+vite2项目中，我们有时候想要动态绑定资源，比如像下面的代码这样： ```html ``` 实际效果是这样： ![](https://img2023.cnblogs.com/blog/3153981/202308/3 阅读全文
摘要：
> Vue2.x使用EventBus进行组件通信，而Vue3.x推荐使用`mitt.js`。 > > > 比起Vue实例上的`EventBus`，`mitt.js`好在哪里呢？首先它足够小，仅有200bytes，其次支持全部事件的监听和批量移除，它还不依赖Vue实例，所以可以跨框架使用，React或 阅读全文