vue2升级到vue3的一些使用注意事项记录(四)

简介: vue2升级到vue3的一些使用注意事项记录(四)

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

演示地址:RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/

更多nbcio-boot功能请看演示系统

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

27、ue3 已经不支持 $listeners 了,已经启用了,是事件监听器现在是 $attrs 的一部分

28、在 Vue 3 中,通知组件(例如 $notification)可能不在内置于 Vue 核心库中

所以需要使用第三方的notification了,比如element-plus的是ElNotification,如下:

ElNotification({ //websocket消息通知弹出
        title: 'websocket消息通知',
        message: data.msgTxt,
        type: 'success',
        duration: 1000
      })

29、vue3子组件暴露方法用

 defineExpose({

   方法

 });

30、vue3插槽的使用

const instance = getCurrentInstance();

在 Vue 3 中,应该尽量避免使用 this,因为这是针对 Vue 2 实例的。在 Vue 3 中,应该使用 getCurrentInstance 来获取当前组件的实例,并访问相关的插槽。

31、vue3需要注意的是方法名称千万不能跟文件名称相同,否则会出现莫名其妙的问题,对象会访问不到。

32、vue自3.4版本以后,组件间数据双向绑定推荐使用defineModel()宏来实现,而不是用之前做法。

33、对于a-table下面的vue3版本,//selectedRowKeys: selectedRowKeys, 这行不注释选择出现问题

/**
   * 跳转节点列表选择
   */
  const rowSelection = {
    //selectedRowKeys: selectedRowKeys, //selectedRowKeys 可设置默认被选中项(就是表格一打开就被选中的项) 指定选中项的 key 数组,需要和 onChange 进行配合 string[]
    onChange: (selectedRowKeys: any, selectedRows: any) => {  // onChange 选中项发生变化时的回调
      selectedJumpRowKeys.value = selectedRowKeys;
      selectedJumpRows.value = selectedRows
    },
    type: "radio", // 单选
  };

34、另外要是全局用selectedRowKeys变量的话,后续访问出现问题,所以后来修改成

     selectedJumpRowKeys.value = selectedRowKeys;

     selectedJumpRows.value = selectedRows

/**
   * 跳转节点列表选择
   */
  const rowSelection = {
    //selectedRowKeys: selectedRowKeys, //selectedRowKeys 可设置默认被选中项(就是表格一打开就被选中的项) 指定选中项的 key 数组,需要和 onChange 进行配合 string[]
    onChange: (selectedRowKeys: any, selectedRows: any) => {  // onChange 选中项发生变化时的回调
      selectedRowKeys.value = selectedRowKeys;
      selectedRows.value = selectedRows
    },
    type: "radio", // 单选
  };


相关文章
|
1天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
7 2
|
1天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
7 2
|
1天前
|
JavaScript 开发工具 开发者
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
8 1
|
1天前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
9 1
|
1天前
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
5 1
|
1天前
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
4 0
|
1天前
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
6 0
|
1天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
7 1
|
1天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
1天前
|
JavaScript
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料