随笔分类 - 前端探索
摘要：vue3+ts+eslint配置tsx vite.config.ts 安装 @vitejs/plugin-vue-jsx # npm npm i @vitejs/plugin-vue-jsx -D # yarn yarn add @vitejs/plugin-vue-jsx -D # pnpm pn
阅读全文
摘要：写入剪切板 使用 clipboard.js 第三方插件： clipboard.js 安装clipboard.js yarn yarn add clipboard npm npm install clipboard --save 使用示例（vue） <template> <div> <span v-c
阅读全文
摘要：以下是一些 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 ``` 实际效果是这样： 
浙公网安备 33010602011771号