title: vue3组件通信与props date: 2024/5/31 下午9:00:57 updated: 2024/5/31 下午9:00:57 categories: 前端开发 tags: Vue3组件 Props详解 生命周期 数据通信 模板语法 Composition API 单向数据
前言 众所周知，当子组件使用setup后，父组件就不能像vue2那样直接就可以访问子组件内的属性和方法。这个时候就需要在子组件内使用defineExpose宏函数来指定想要暴露出去的属性和方法。这篇文章来讲讲defineExpose宏函数是如何暴露出去这些属性和方法给父组件使用。注：本文中使用的vu
众所周知，当子组件使用setup后，父组件就不能像vue2那样直接就可以访问子组件内的属性和方法。这个时候就需要在子组件内使用defineExpose宏函数来指定想要暴露出去的属性和方法
vue3+uniapp多端自定义table组件|uniapp加强版综合表格组件 uv3-table：一款基于uniapp+vue3跨端自定义手机端增强版表格组件。支持固定表头/列、边框、斑马纹、单选/多选，自定义表头/表体插槽、左右固定列阴影高亮显示。支持编译兼容H5+小程序端+App端。 如下图：
Cannot read properties of null (reading 'isCE') 这个问题是在vue3中引入elementui的列表框时出现的。经过网上查询，有说是装了两个vue版本的，也有说是其他代码写错导致的,还有说是导入错误的。 但我的不是这个问题，我的是版本兼容问题。因为在网上
什么是Cabloy-Front？ Cabloy-Front 是一款支持 IOC 容器的 Vue3 框架。不用ref/reactive，不用ref.value，不用pinia 与UI库的配合 Cabloy-Front 可以搭配任何 UI 库使用，并且内置了几款 UI 库的项目模版，便于开箱即用，包括：
在前端开发中，我们时常需要处理文件上传和下载的功能。有时，用户可能希望将多个文件打包成一个zip文件以便于下载。今天，我将分享一个使用Vue3和JSZip库在浏览器端实现zip文件压缩的示例。 首先，我们需要安装JSZip库。如果你使用的是npm，可以通过以下命令进行安装： npm install
其他章节请看： vue3 快速入门 系列 Pinia vue3 状态管理这里选择 pinia。 虽然 vuex4 已支持 Vue 3 的 Composition API，但是 vue3 官网推荐新的应用使用 pinia —— vue3 pinia 集中式状态管理 redux、mobx、vuex、pi
vue3 快速入门系列 - 组件通信 组件通信在开发中非常重要，通信就是你给我一点东西，我给你一点东西。 本篇将分析 vue3 中组件间的通信方式。 Tip：下文提到的绝大多数通信方式在 vue2 中都有，但是在写法上有一些差异。 准备环境 在 vue3 基础上进行。 新建三个组件：爷爷、父亲、孩子
isRef 检查某个值是否是ref。是返回true，否则返回false。 const num = ref(10); const num1 = 20; const num2 = reactive({ data: 30 }); console.log(isRef(num)); //true consol
一、什么是插槽 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签，父组件填充的内容称为插槽内容。 子组件不提供插槽时，父组件填充失效 父组件无填充
shallowReactive 使用 reactive 声明的变量为递归监听，使用 shallowReactive 声明的变量为非递归监听（通俗的讲就是 reactive 创建的对象将会被 vue 内部进行递归监听，可以监听到对象中的对象是否发生了改变从而更新视图，而 shallowReactive
readonly 接受一个对象（不管是响应式还是普通的）或者是一个ref，返回的是一个原值的只读代理。 {{ data }}<
# 一、安装 npm安装 ``` npm i mitt ``` pnpm安装 ``` pnpm i mitt ``` yarn安装 ``` yarn add mitt ``` # 二、使用 ## （一）、当前组件内使用 ```javascript import mitt from 'mitt' //
简介 使用
Vue3 目前已经趋于稳定，不少代码库都已经开始使用它，很多项目未来也必然要迁移至Vue3。本文记录我在使用Vue3时遇到的一些问题，希望能为其他开发者提供帮助。 1. 使用reactive封装基础数据类型 传统开发模式中，数据声明很简单。但是在Vue中有多个响应式变量声明方式，整体的使用规则如下：
Vue3已经正式发布了一段时间了，各种生态已经成熟。最近使用taro+vue3重构冷链的小程序，经过了一段时间的开发和使用，有了一些自己的思考。
vue3 甘特图（三）：甘特图右侧内容拖动展示内容 解决因多个项目周期跨度不同，在一页屏幕里展示不完全，需要通过拖动甘特图下方的滚动条，去查看对应时间段内的内容 拖拽滚动视图，展示对应时间甘特图 构思，通过监听内容拖拽的距离，同时使滚动条滑动相同距离，从而达到效果。 //拖拽滚动视图 const s
页面效果 具体实现 新增 1、监听鼠标抬起事件，通过window.getSelection()方法获取鼠标用户选择的文本范围或光标的当前位置。 2、通过 选中的文字长度是否大于0或window.getSelection().isCollapsed (返回一个布尔值用于描述选区的起始点和终止点是否位于
事件总线Mitt使用非常简单，本篇随笔介绍在Vue3+TypeScript 前端项目中使用的一些场景和思路。我们在Vue 的项目中，经常会通过emits 触发事件来通知组件或者页面进行相应的处理，不过我们使用事件总线Mitt来操作一些事件的处理，也是非常方便的。
