由vue2版本升级vue3版本遇到的问题

一、vuedraggable

由vue2版本升级vue3版本后,可能会遇到以下几种bug:

1、vue3+vuedraggable报错TypeError: Cannot read properties of undefined (reading 'updated'):这个一般是因为插件使用语法有问题,vue3版本的插件使用时,v-for不能

自己手写,由插件提供的语法实现循环:

复制代码
<draggable v-model="configDataArr">
      <template #item="{element,index}">
      </template>
  </draggable>

以上是插件最简几行代码,这四行不能缺失。

2、报错 draggable element must have an item slot:这报错也是因为没有写item插槽,按照上面的语法写了插槽后,这报错就能解决。

3、报错Item slot must have only one child:这是由于item插槽下有多个元素,应该只有一个div。哪怕是注释的div也会报错

复制代码
 <draggable v-model="configDataArr">
      <template #item="{element,index}">
      <!--          {{element}}-->
      <div>{{element}}</div>
      </template>
  </draggable>

正确写法

复制代码
 <draggable v-model="configDataArr">
      <template #item="{element,index}">
      <div>
      //这里可以随意写
        {{element}}
      
      </div>
      </template>
  </draggable>
  1. 切记注意,这个单词是不可以修改的,必须是element,不然无法识别(坑大了)

如果要命别名可以这样写:

复制代码
 <draggable v-model="configDataArr">
      <template #item="{element:item,index}">
      <div>
      //这里可以随意写
        {{element}}
      
      </div>
      </template>
  </draggable>

二、icon不显示问题

本来以为在main.js文件这么导入了就可以全局使用

复制代码
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component('ElIcon' + key, component)
}

结果发现icon只有使用SVG-content 的时候才显示,而且显示的非常大

而且很长一串,想了一下还得用icon-code方便简洁

然后就在vue文件内直接导入该组件了然后可以了

用什么引入什么就行

java 复制代码
import {Plus} from '@element-plus/icons-vue'
export default {
  components: {
Plus
}
<el-icon><Plus /></el-icon>

三、vue父子组件之间双向数据绑定的三种方式(vue2/vue3)

我从vue2项目搬入富文本功能到vue3中时,发现富文本中的数据没有传入到父组件的数据中:

原本写法:

父组件:

复制代码
<Editor
                      v-model="selEle.attribute.mzContent"
                      height="450"
                  ></Editor>

Editor为富文本子组件

复制代码
const html = this.$refs.editor.children[0].innerHTML;
 this.$emit("update:mzContent", html);//<p>111</p>

问题出在了子组件传参给父组件

然后根据这篇文章找到了解决办法:vue父子组件之间双向数据绑定的三种方式(vue2/vue3)_子组件从父子组件之间双向数据同步-CSDN博客

vue3取消了.sync这种语法,使用v-model:title 语法代替

复制代码
// 父组件
<template>
    <div>
        我是父子组件之间同步的数据{{data}}
// 父组件传递给子组件title属性(默认使用value)
// 通过update:title(默认使用update:value) 方法将子组件传递的值赋值给data
        <child v-model:title = data></child>
    </div>
</template>
<script>
    data(){
      return {
        data:'我是来自父组件的数据'
      }
    }
</script>
//子组件
<template>
  <div>
    <button @input="childDataChange">{{title}}</button>
  </div>
</template>
 
<script>
    props:{
      title:{
        default:'',
        type:String
      }
    },
    methods:{
      childDataChange(v){
        this.$emit('update:title',v) // 触发update:data将子组件值传递给父组件
      }
    }
</script>

然后我的写法:

复制代码
<Editor
    v-model:mzContent="selEle.attribute.mzContent"
    height="450"
></Editor>

子组件

复制代码
 this.$emit("update:mzContent", html);

成功传值

相关推荐
daols885 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
OEC小胖胖7 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台8 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴8 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust9 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放9 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
全宝10 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele10 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试