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

[kk]

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

新版vue组件介绍

API支持情况

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

1. 选项/数据
   data、computed、methods、watch

2. 选项/生命周期钩子
   beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed

3. 选项/资源
   components

4. 实例 property
   vm.$data、vm.$props、vm.$el、vm.$options、vm.$parent、vm.$root、vm.$children、vm.$slots、vm.$scopedSlots、vm.$refs、vm.$isServer、vm.$attrs、vm.$listeners

5. 实例方法/数据
   vm.$watch、vm.$set、vm.$delete

6. 实例方法/事件
   vm.$on、vm.$off、vm.$once、vm.$emit

7. 实例方法/生命周期
   vm.$forceUpdate、vm.$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 事件函数，并将初始化逻辑脚本代码相应的迁移到组件的 created、mounted 生命周期钩子函数中。

组件选项

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

组件模板

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

补充说明

custom和props

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

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

注意单词间短横线连接

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

emit 和 模板事件绑定

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

methods:{
   someFunc(){
      return 1
   }

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

注意单词间短横线连接