- 博客(108)
- 收藏
- 关注
RSS订阅原创 vue2中的this.$el,this.$parent,this.$children 在vue3中如何表示
当在 vue2 根据 this.$children 获取到的子组件是一个数组，而在 vue3 中通过 ref 获取到的子组件，如果只有一个 ref=xxx,获取到的 xxx 就是一个子组件实例，当有多个 ref=xxx 的时候，获取到的才是数组，下面来看一下详细的。然后在说一下 this.$children,在vue2中，this.$children 就是获取子组件的实例，vue3 我们可以通过 ref 获取。输出的是它的父组件，我们在vue3中获取父组件是这样的。让我们来看一下输出是什么样子的。
2024-11-25 16:21:03
3578
原创 onMounted is called when there is no active component instance to be associated with. Lifecycle inje
这个是说明我们的 onMounted 没有在 setup 里面使用，来看一下我的代码。
2024-11-25 16:12:22
1115
原创 [less] Operation on an invalid type
在scss中，我们使用 除号 / 的时候，不用加上 括号()，但是在less中，我们使用 除号/ 的时候，需要加上 括号()，否则对less的写法就是错的。
2024-11-22 15:33:41
2851
原创 scss中的@include讲解以及关于scss和less中mixin的应用
指令时，你实际上是在告诉 SCSS 编译器将指定的 mixin 中定义的样式规则复制到当前的选择器中。这允许你创建可重用的样式块，并在需要时将它们包含到不同的选择器中，从而减少代码的重复和提高样式的可维护性。指令类似的功能，它允许你将一组 CSS 属性或选择器封装到一个可重用的模块中，并在需要时将其包含（或插入）到其他选择器中。在 SCSS（Sass 的一个语法糖，它是 CSS 的一个超集，意味着所有的 CSS 都是有效的 SCSS，但 SCSS 提供了额外的功能和语法）中，的混合，它接受一个参数。
2024-11-22 15:12:02
2961
原创 vue3怎么根据字符串获取组件实例
我在点击某个按钮的时候，调用了方法handler，传递了一个参数是字符串 'condition'，然后方法中通过 this.$refs[strRef] 后去到绑定 ref = 'condition' 的组件，我在vue3中也需要通过这样的方法获取到相关组件。所以当 strRef 是字符串变量时，我们可以通过 instance.refs[strRef] 的方法获取到相关的组件实例。获取到当前的组件实例，其中 instance 就是当前组件实例，下面我们来输出一下，看看 instance 下面都有什么。
2024-11-20 12:02:20
1902
原创 隧道 http://qnbk65.natappfree.cc 无效，无法连接到127.0.0.1:2999. 此端口尚未提供Web服务
说一下我这里出现这个问题的原因，我们在 natapp 官网把 端口配置好了，但是后台的服务没有启动或者后台服务的端口不是我们配置的那个的话，就会出现这个问题。但是假如我没有启动服务，或者启动的服务是其他端口的，就会出现这个问题。使用 natapp 进行内网穿透的时候出现了这个问题。例如这里配置了 2999 这个端口。
2024-11-18 11:53:25
1791
1
原创 云服务器安装mysql8.0（阿里云或者腾讯云都可以）
先说明一下，我使用的是腾讯云，之前用阿里云，然后试用期到期了，所以这次换腾讯云使用，没想到，我在腾讯云里面需要按照阿里云的教程做，还成功了。
2024-11-14 11:59:35
2006
原创 前端表格复制粘贴自动根据标识进行填充
需求是需要在 wps 或者 excel 的表格中复制一个表格，然后在前端的表格中自动根据 姓名 去进行填充，下面我来演示一下功能。下面来看一下我的代码，注意，代码中已经写了必需是根据 姓名来匹配数据，需要根据其他的，你们自己调整，在我的代码中会报错，我没有继续研究这个东西了，所以没有处理。我的思路就是可以获取到需要粘贴的数据，然后又可以获取到表格的数据，对比两份数据，找到 姓名 那一行，进行处理，处理完之后再填充到前端表格。来大概说一下过程，提供思路，不过代码是之前写的了，只能说个大概。
2024-11-01 15:23:59
1150
原创 vue3的defineSlots()
上述代码在 vscode 里面并没有任何报错或者提醒，说明代码是正常的，但是 假如我们在 插槽子组件中 使用了 defineSlots() 对 slot 的属性进行标注，就会有提示。这个主要是用于类型校验使用的，和 ts 一起对 slot 进行传递的值进行类型检查，主要在 具名作用域插槽 里面。接下来我们来看代码吧，我有一个文件夹，里面分别有一个 父组件one 和 一个 插槽子组件two。先来看一下官网的说明，后面我会详细解释。
2024-11-01 10:59:53
2383
原创 [el-checkbox] [API] label act as value is about to be deprecated in version 3.0.0, please use value
这个错误主要是发生在 element-plus 的 el-checkbox 中，原因是 element-ui 和 element-plus 的 el-checkbox 组件有所改变。之前的 label 属性可以作为 值 来进行选项，现在得换成 value 了。这是 element-plus 的说明。
2024-10-28 10:38:56
4354
原创 error Unexpected mutation of “xxxxx“ prop
不改变父组件传递过来的 props，如果需要改变父组件传递过来的值，可以使用 defineModel() 进行接收值，如果不了解 defineModel() 的可以去 vue3 的官网看一下。eslint的配置文件名可能为以下名称，以前的版本还有 .eslintrc.js 等也是 eslint 的配置文件。错误是在进行 eslint 检查的时候触发的，这个错误的原因是我们在子组件中改变了父组件传递过来的 props。在 eslint 的配置文件中，直接关闭此条 eslint 的规则，
2024-10-24 15:55:43
1926
原创 ConfigError: Config (unnamed): Key “rules“: Key “constructor-super“: structuredClone is not defined
我们把 eslint 的版本降到 8 ,命令行输入。当 eslint 进行检查的时候，报了这个错误。
2024-10-24 15:30:19
4039
原创 Cannot read properties of undefined (reading ‘type‘)vue每个 *.vue 文件最多可以包含一个顶层 ＜template＞ 块。语块包裹的内容
原因二：虽然没有直接 template 嵌套 template 标签，但是中间的过渡标签是 div 等原生标签。原因一：template 直接嵌套了 template 标签。我来说一下报错的原因。
2024-10-21 17:35:54
2007
原创 eslint的使用及部分配置规则
虽然随着 eslint 的更新，上面的视频操作已经和新版本的 eslint 有所差别了，但是仔细看一下官网，然后在看一边视频，一般都是可以使用的。然后如果我们在项目中使用 vue 或者 react 等框架，他们对应有自己的 eslint 插件，有插件自己的配置语法检查规则。强制执行 "for" 循环更新子句，使计数器向正确的方向移动。首先创建一个项目文件夹，我这里叫做 eslint-test。在数组方法的回调中强制执行 return 语句。禁止使用异步函数作为 Promise 执行器。
2024-10-17 11:59:15
1732
1
原创 Uncaught (in promise) TypeError: Cannot convert object to primitive value
说一下我这里这个错误和警告的原因，是因为我把传给 第三方组件的值 也当做了 第三方组件的 ref，可能没太说清楚，所以接下来看代码，我这里使用的第三方组件是 vxe-table。使用vue3的时候报了这个错误，而且还同时报了一个警告。
2024-10-15 17:36:53
2685
原创 [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automa
我这里的错误是由于将多余的属性 class 绑定给了第三方组件，删除属性即可。项目是用vue3写的，报了这个错误。
2024-10-15 15:59:57
1711
原创 el-image-viewer 大图预览（源码，属性讲解）
以上是组件共享出来的属性，如果我们想有一些个性化的需求，比如轮播到最后一张不能滚动等，可以使用 infinite，infinite 虽然没有共享出来，我们可以在 父组件 通过 this.$refs 的方法获取到这个组件，然后就可以改变他的 infinite 属性了，要注意的是，需要在当前组件 v-if 为真的时候通过this.$refs获取。或者我们可以自己把源码封装成一个自己的组件，方便使用。图片的urc数组，里面的每一项元素是一个图片地址。预览的初始图片在urlList的索引。
2024-09-25 14:36:22
3682
原创 三元表达式的嵌套用法a ＞ 0 ? b ＞ 0 ? c : d : e；（我之前还以为是五元表达式）
c : d : e;其实就是两个三元表达式的嵌套用法，这是我看见之前的同事写的代码，当时没看出来，就研究了一下，上面的代码就等于 let test = b > 0?
2024-09-13 11:44:34
1730
原创 vscode中全局代码片段怎么改名字
在使用vscode定义自己的代码片段的时候，有几个选项，如果我们选择了 vue.json 的文件定义代码片段，那么只能在 vue 文件中使用该片段，并且是 vue 文件中没有写其他代码的时候，如果 vue 文件中写了其他代码，那么 vue.json 里面定义的代码片段还还使用不了，所以我们需要定义一个全局代码片段，我下面会跟着说全局代码片段的定义以及定义了之后，怎么更改全局代码片段的名字。跳出文件来在这里定义自己的全局代码片段就好了，这里定义的代码片段，全局生效。然后会弹出文件所在位置。
2024-09-05 16:25:14
1797
原创 v-bind后面不加属性和v-bind的动态属性
v-bind 平常常见的用法我们应该都知道，说一说 v-bind 的不常用的方式，第一个就是 v-bind 后面直接不添加任何属性，此时会将一个对象的所有 property 都作为 prop 传入。下面来说一下 v-bind 的动态属性，例如 v-bind:[str]="sonObj" 的 str 会自动根据 data 里面的数据来充当属性。
2024-09-04 15:28:51
3640
原创 ts函数的参数加一个_是什么意思
前缀通常是一种约定或习惯，用来表示该参数在当前函数体内是故意未使用的，需要注意的是，这种做法并不是TypeScript或Vue的强制要求，而是一种在项目中常见的最佳实践或约定，但是对于是函数参数的解构来说，这种写法没有用。先说一下总结，在TypeScript（TS）和Vue 3项目中，给函数的参数加一个下划线（
2024-09-04 10:56:41
3762
原创 TypeError: Cannot read properties of undefined (reading ‘ciphertext‘)
ciphertext 是密文的意思，可能是使用插件进行解密的时候，密文的内容是 null 空的，假如密文是 null 时我们可以把密文改成空字符串就好了。例如 使用了 CryptoJS 进行加解密，关于 CryptoJS 的介绍可以看这篇文章。
2024-08-23 16:56:37
4486
原创 vue3里面的组件实例类型（包括原生的html标签类型）
在 通过 ref（null）获取组件的时候，我们想要为 组件标注组件类型，可以通过 any 类型来进行标注，但是很明显，这些的代码很不优雅，所以我们可以利用 vue3 里面的 InstanceType 来进行类型标注。但是上面的类型是自己定义的组件的，如果想给原生的 html 标签进行类型标注，我们该写什么类型呢，来看一下代码。有关 HTMLHeadingElement 和 HTMLDivElement 类型是怎么来的，可以看这篇文章。这是官网上面有关 InstanceType 的使用方法截图。
2024-08-19 16:14:54
3016
原创 vue3里面ts报错 不能将类型“null”分配给类型“abstract new (...args: any) =＞ any”
原因是我们在写实例类型的时候，用了 vue3 里面的 InstanceType，但是把泛型里面的一个 > 写错了位置 ，来看案例。
2024-08-19 15:44:20
2668
原创 微信公众号授权流程
access_token=${obj.access_token}&openid=${obj.openid}&lang=zh_CN(通过前面获得的参数，在这一步获得用户信息，返回给前端)-------->getConfig(前端) --------> /getConfig(后端) --------> getInfo(前端)-------->getMyData(前端)，不是我录的，是我找到的视频，这是源码仓库地址。然后这是下面这个我理解的，大题代码的运行流程。
2024-08-15 17:23:32
2753
原创 vue3中 watchEffect，watchPostEffect，watchSyncEffect的区别，代码示例
其实关于watchEffect，watchPostEffect，watchSyncEffect的区别就是执行的时机不同，watchSyncEffect 是最先执行的，其次是watchEffect，最后才是watchPostEffect，先来看一下vue官网的说明（不想看说明的直接看示例代码就可以了）
2024-08-14 15:55:23
752
原创 dataOptions.call is not a function（vue3）
我在网上看了很多案例，但是好像和我项目中的 bug 都不一样，然后我自己尝试复现，也出现了这个 报错，但是我还没有对比我项目中的代码，因为是 vue2 升 vue3 的，代码量有点多，所以先记录一下目前这个报错的案例之一，后面如果发现这种情况不是我项目中的情况，我可能还会继续找其他情况的解决方法。目前我发现的原因就是当前组件的 instance 被写在了模版中。上述的情况就会报这种错误。
2024-08-01 17:00:15
1669
1
原创 [vite] Internal server error: v-model cannot be used on v-for or v-slot...(关于 v-slot 的)
在项目中报了这么一个错误，然后我在博客上面看了一些文章，发现写的都是关于 v-for 的，所以我自己写了一份关于 v-slot 报这个错误的案例，供大家参考。先说一下解决思路，解决思路就是 把要改变的数据放在父组件中改变，而不是子组件中就行，下面来看一下案例代码。当是这样的时候，就会报上面的错误，下面来看改正之后的代码。插槽子组件 three.vue。插槽子组件 three.vue。插槽父组件 two.vue。插槽父组件 two.vue。容器组件 one.vue。容器组件 one.vue。
2024-07-31 10:16:59
4175
原创 .main-#{$theme-name} scss(sass)选择器变量使用
今天在升级项目，从vue2升级到vue3的时候，我们项目的css预处理器也需要从 scss 升级到 less，然后项目中有一串代码我就没看明白，举例就是 .main-#{$theme-name} 这种类型。后面自己实验，原来这个就是 选择器的字符串拼接吧，看下面代码及结果。两个 scss 文件，我放在了 style 目录下。
2024-07-29 15:21:55
3367
原创 ios（苹果）在微信公众号上面复制文本和其他环境不一样
做了一个需求，真是耗了一下午的时间，需求是后端给我的一端文本，我需要复制下来，所处环境是微信公众号，前两天我以为我已经开发好了，在微信开发者工具和同事的手机上面测试都没问题，今天拿我的手机测试，结果有所不同，下面我来详细说一下过程以及解决方法。但是在后面的过程中，我就换成了 copy-to-clipboard 这个包，所以后面的解决办法，如果针对前面的两个复制方法，没有用，可以 换成 copy-to-clipboard 这个包尝试。我之前用的 复制文本 方法 是。
2024-07-23 20:24:30
3020
原创 vue给数组赋值页面没有更新渲染（和别人的不一样）
今天在项目中测试给我测出来了一个问题，但是我反复检查，感觉代码没有问题，但是页面就是不更新，最后我慢慢的尝试，找到了问题的解决方法，不过目前还不清楚为什么会出现这个问题。由于公司的代码我不能泄露，但是我重试复现，没出现那个问题，项目比较忙，我就不去细细琢磨了，以下代码 bug 没复现，只提供参考。解决方法： 给渲染数组的那个标签外面在加一层div标签就可以了。
2024-07-19 15:39:44
1521
原创 vxetable的高亮行不显示
在开发过程中，我遇到了一个需求，就是有两个表格，点击 表格1 的行 动态加载 表格2 的内容，同时，表格1 被点击的行需要高亮显示。由于有两个表格，所以我给每个表格都加了一个 key 值，但是，我按照官网的文档设置了 :row-config="{isCurrent: true, isHover: true}" 属性，可是当点击的时候，高亮行仍然不会显示。解决方法：把需要有 高亮行 的那个表格 的 key 值去掉就好了。
2024-07-17 10:34:30
3327
原创 vxe-table的序号一样
此时的这三个序号是相同的，我来说一下原因，这是在添加新的一行的时候，有的时候数据很多，我们不想一个个的写，就直接复制之前表格中的某一行，然后在改变其中的某一个属性，这个就会出现序号相同的情况。使用vxe-table的时候，有的时候会出现序号相同的现象，这种现象一般出现在我们后面自己添加的行中，就像这种。把新复制某一行的对象的 _X_ROW_KEY 赋值为 null 就可以了。
2024-07-04 11:22:56
1862
1
原创 下拉选择输入框(基于elment-ui)
不过我在网上看，其中有一篇的文章的，我觉得还不错，不过后面我发现有点麻烦，我懒得去细细研究他的做法，在这里我也提一下，有兴趣的可以自己去研究一下，他说的是，把 el-input 组件 和 el-select 放在一起，然后通过定位来把 el-input 放在 el-select 下拉选择的那里，其中 el-input。el-select 绑定一样的值。
2024-06-27 10:28:29
3114
4
原创 muse-ui的select下拉框没有出现在底部
说一下问题，就是当我们使用 muse-ui的下拉框的时候，他的下拉选择项总是没有出现在下拉框底部，我在官网也没有找到说明，不过官网给了案例，我对比找到了解决方法，先来看代码。如果进不去的，可以试着翻墙用外网看看，这里很奇怪，我前几天进不去，然后翻墙可以进，这两天不翻墙也能正常进去了。我对比官网的案例，其实就是加一个 tags 属性就好了。添加完之后，下拉选择项就正常在下拉框底部了。这个是muse-ui的官网文档。
2024-06-06 17:12:02
818
原创 子盒子定位右边出现滚动条，定位左边则不会
可以看到，这个时候，出现了滚动条的，但是同样的，如果我们把 right: -50px;换为 left: -50px;他则不会出现滚动条，具体原因嘛，我也不知道，不过我尝试了之后，找到解决方法，在这里分享一下。先来看一下问题，就是当我们在给子盒子设置定位是 position: absolute;并且 right 为负的时候，可能就会由于子盒子定位在右边而使底部出现可以左右滑动的滚动条。解决方法：给父盒子的css加上这两条，就可以解决了，缺一不可。
2024-06-04 15:54:37
684
原创 vfrom二开给左边添加字段或者容器
这个文件是当界面选择 English 的时候，显示的 字段组件 或者 容器组件的英文名。这个文件是当界面选择 简体中文 的时候，显示的 字段组件 或者 容器组件的中文名。例如，我在左侧加入一个 '我的公司' 字段。修改三个文件，这是文件目录。把上面写的 名字 注册一下。
2024-06-03 15:31:04
950
原创 Internal server error: [less] Unrecognised input
我之前查了资料，网上有的人说是 less 的配置不正确（这种问题引起的可以查找其他博客看），但是后面经过我慢慢的查找，还有一种可能，就是 less 的写法不对，下面我来解释一下我的错误和处理过程。那是因为在 less 中，我们使用 :deep()来控制深度选择器，以前用的是 /deep/,改成下面这个就好了。在 css 中，如果我们想深度修改第三方组件的样式，我们用 >>> 深度选择器来修改。但是如果我不用原生的css，我加上了 less 之后，他就会报错了。例如我的组件中是这样。
2024-04-28 10:42:17
3069
原创 关于ts的class创建出现：类型“xxx”上不存在属性“xxx” 或者 类型“typeof xxx”上不存在属性“xxx”。
这个是由于ts的检测比较严格，所以不能像js创建class的时候一样随意，一般就是没有事先声明属性或者静态属性，看下面代码。，那是因为我们在ts文件中没有事先声明 name 和 age 属性 已经 类的静态属性 salary。此时就会报错，报错分别为。把这里的注释解开就好了。
2024-04-24 09:43:09
1924
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人