【基础教程】VUE组件版本迁移升级指南

kk 开发者 2023-06-14 14:45:29

本文将帮助BI组件开发人员将通过vbi.package.vue.creat创建的老版Vue组件迁移升级为新版Vue组件。新版Vue组件解决了老版存在的多种问题,同时为组件开发人员提供近似于Vue 单文件组件的开发体验。如果读者在开发BI组件时遇到了组件插槽渲染不正常、子组件props传参异常等问题,则建议通过该指南将相关组件都迁移为新版组件,因为老版组件无法避免类似问题的产生,同时新版组件也有有更好的开发体验。

新版vue组件介绍

API支持情况

新版对vue组件进行了更全面支持和兼容,它支持 vue 组件选项式API中的下列API:

  1. 选项/数据
    datacomputedmethodswatch

  2. 选项/生命周期钩子
    beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestorydestoryed

  3. 选项/资源
    components

  4. 实例 property
    vm.$datavm.$propsvm.$elvm.$optionsvm.$parentvm.$rootvm.$childrenvm.$slotsvm.$scopedSlotsvm.$refsvm.$isServervm.$attrsvm.$listeners

  5. 实例方法/数据
    vm.$watchvm.$setvm.$delete

  6. 实例方法/事件
    vm.$onvm.$offvm.$oncevm.$emit

  7. 实例方法/生命周期
    vm.$forceUpdatevm.$nextTick

注意:上诉之外的API则暂不受支持。

vue组件脚本结构

新版vue组件脚本结构于vue选项式单文件组件的脚本结构类似,对有vue组件开发经验的开发者应该非常熟悉:

return {
  //组件命名定义
  name: {
    value: 'com-empty-template',
    CN: '空模版',
    // 声明组件为vue组件
    type: 'vue',
  },
  // 子组件注册
  components: {
    'yj-suo-module-container': 'd8d704cd5e7341f3b957457b2f5add1f',
  },
  // data函数
  data() {
    return {
      title: {
        title: '我是标题',
      },
    };
  },
  // 受支持的生命周期钩子函数
  // beforeCrate、beforeMount等等
  created() {},
  mounted() {
    console.log('父组件 init  =============>', performance.now());
  },
  // 组件的事件函数
  // 支持method 或 methods
  method: {
    NFDW: function () {},
    btnClick: function () {
      alert('点击按钮事件');
    },
    click: function () {
      //组件内部任意DOM点击产生的事件
    },
    onClick() {
      this.title.title = Math.random() * 100;
    },
    onInit() {
      debugger;
    },
  },
  // 组件属性定义
  // 等同于 vue 组件的 props 定义
  custom: {
    content_list: {
      name: '自定结构',
      type: 'json',
      value: {
        list: ['text1', 'text2', 'text3', 'text4'],
      },
      isHide: false,
      group: '组件属性',
    },
  },
};

需要注意的是,BI组件通过custom定义组件属性,它的作用类似于vue组件的props。当组件作为子组件进行使用时,在父组件中为其传参也是通过custom中定义的属性名称进行模板传参绑定。同时在组件内访问组件的属性值时应该始终通过 propName.value 来访问它的值。

组件迁移

选择需要迁移的组件,打开BI组件编辑器,按下列步骤进行迁移升级。

组件类型

在组件命名定义中将组件类型设置为 vue,如下:

name: {
    value: 'com-empty-template',
    CN: '空模版',
    type: 'vue',
  }

这就表示该组件为vue框架开发组件,BI运行时将自动创建vue组件实例。

通过该类型标记后,开发者无需在init事件函数中通过调用 vbi.package.vue.creat 来创建vue组件。

组件脚本

组件初始化迁移

老版vue组件,需要开发者在BI运行时组件框架调用 init 是事件函数时显式调用 vbi.package.vue.creat 来创建vue组件。新版组件不再需要开发者显示调用,只需开发者通过组件命名定义,声明组件为 vue 类型组件。
因此开发者在迁移时,首先应该移除组件的 init 事件函数,并将初始化逻辑脚本代码相应的迁移到组件的 createdmounted 生命周期钩子函数中。

组件选项

vbi.package.vue.creat 参数中用到的各种vu选项参数(mountedcreatedcomputedmethods等)复制到组件脚本结构中对应的位置。
在复制 methods 时要注意,如果组件脚本结构中已经包含了 method 定义了,则应该将它们合并在一起并仅留其一。

组件模板

将组件模板中原有的 $com.method.funcName 来访问组件事件函数的全部改为 funcName。新版vue组件支持直接调用,而不需要通过之前的代理访问。

补充说明

customprops

在BI组件中通过custom声明类似于props的组件属性。

  • 当组件作为子组件进行使用时,在父组件中为其传参是通过custom中定义的属性名称进行模板传参绑定。
    例如:<my-component :prop-name="someLocalField">

注意单词间短横线连接

  • 在组件内访问组件的属性值时应该始终通过 propName.value 来访问它的值,包括在组件模板和组件脚本中。

emit 和 模板事件绑定

在BI组件中需要进行父子组件间通信时,子组件内对methodsmethod定义的任意事件函数进行调用时,BI组件框架将自动 emit 对应事件函数名称的事件,该事件函数的返回值将作为emit的参数。
例如:
在子组件的 methods 中下列一个事件函数定义:

methods:{
   someFunc(){
      return 1
   }

当子组件对该函数进行调用时,在调用成功后BI组件框架将自动执行 this.$emit('someFunc',1)
在父组件进行事件回调绑定时:
<my-component @some-func="someLocalCallback">

注意单词间短横线连接

...全文
508 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

110

社区成员

发帖
与我相关
我的任务
社区描述
恒实科技-[H-VBI]低代码自助分析开发平台,是一个基于WEB技术的在线可视化开发工具,以快捷的组件编辑、复用及数据模型建设为基础构建分析主题或业务功能。
低代码 其他
社区管理员
  • 大泰格
  • karlkate
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧