javascript - 如何在不为每个组件物理添加 id 属性的情况下为大型 vue 应用分配 ID

Question

我正在开发一个 vue 应用程序。目前，该应用程序由大量组件和大量代码组成。目前这些组件（几乎全部）没有分配给它们的 id。我想为每个组件分配 id 。

由于有很多组件，我不想物理地访问每个组件文件，然后给它 id 属性。理想情况下，我想使用函数为其分配一个 ID。

我搜索了一个解决方案并遇到了Vue.js：如何为每个组件实例设置唯一 ID？ 这个问题中的解决方案讨论了添加生成唯一ID的插件或mixin，但这仍然需要我在每个组件中物理添加ID属性。

我想出了以下功能

const assignIds = (app, components = {}) => {
    let tags = components;
    let workingTag;
    console.log(app)
    console.log(app.$children.length)
    workingTag = app.$options._componentTag || app.$parent.$options._componentTag || "";
    let myTag = (workingTag + app.$el?.localName).toLowerCase().replaceAll('-','');
    let tagVal;
    let tagCount = tags[myTag] || 0;
    tagVal = myTag + tagCount;
    ++tagCount;
    tags[myTag] = tagCount;
    if(app.$el && (!app.$el?.id || app.$el?.id.includes("BVID"))){
      app.$el.id = tagVal;
    }
    if(app.$children.length > 0){
      let currentTag = app.$children;
      currentTag.forEach(element => {
        assignIds(element, tags)
        });
    }
  },

我不确定在何处以及如何添加此功能，以便它在应用程序中的每个挂载上运行（多个组件都调用了挂载）或将其添加为插件

标签： javascriptvue.js