如何在Vue.js中实现类似jQuery批量初始化多DOM元素组件的效果

Vue 实现多元素批量挂载组件方案 #

Vue本身设计上不支持单个实例挂载多个DOM节点，要模拟jQuery的批量初始化逻辑非常简单，核心思路就是遍历匹配到的所有DOM元素，逐个创建组件实例挂载，Vue2和Vue3都有对应的实现方式，以下是可直接复用的代码，也覆盖了你提到的popup组件场景。

Vue 2 实现方案

批量挂载通用逻辑：

// 1. 选中所有符合条件的DOM元素
const tooltipEls = document.querySelectorAll('.tooltipClass')

// 2. 遍历每个元素，逐个创建Vue实例挂载
tooltipEls.forEach(el => {
  new Vue({
    el,
    render: h => h(MyPluginComponent, {
      props: {
        // 可直接从元素的自定义属性取传参
        content: el.dataset.tooltipContent,
        trigger: el.dataset.trigger || 'hover'
      }
    })
  })
})

popup场景实现代码：

// 选中所有带role=popup属性的按钮
const popupBtns = document.querySelectorAll('[role="popup"]')

popupBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 动态创建Popup组件实例
    const popupInstance = new Vue({
      render(h) {
        return h(PopupComponent, {
          props: {
            title: btn.dataset.popupTitle,
            content: btn.dataset.popupContent,
            visible: true
          },
          on: {
            close: () => {
              popupInstance.$destroy()
              document.body.removeChild(popupInstance.$el)
            }
          }
        })
      }
    }).$mount()
    // 把弹窗DOM插入到body末尾
    document.body.appendChild(popupInstance.$el)
  })
})

Vue 3 实现方案

Vue3虽然移除了el配置项的相关说明，但用createApp API实现起来更简洁：

import { createApp } from 'vue'
import PopupComponent from './PopupComponent.vue'

// popup场景批量绑定逻辑
document.querySelectorAll('[role="popup"]').forEach(btn => {
  btn.addEventListener('click', () => {
    // 创建临时挂载容器
    const mountNode = document.createElement('div')
    document.body.appendChild(mountNode)

    const app = createApp(PopupComponent, {
      // 传入组件props
      title: btn.dataset.popupTitle,
      content: btn.dataset.popupContent,
      visible: true,
      // 关闭事件回调
      onClose: () => {
        app.unmount()
        document.body.removeChild(mountNode)
      }
    })
    // 挂载组件到临时节点
    app.mount(mountNode)
  })
})

如果是tooltip这类需要直接挂载到对应触发元素上的组件，直接修改挂载目标即可：

document.querySelectorAll('.tooltipClass').forEach(el => {
  const app = createApp(TooltipComponent, {
    content: el.dataset.tooltipContent
  })
  app.mount(el)
})

优化建议

• 如果这类批量挂载需求很多，可以封装成通用注册函数，后续新增组件只需要传入选择器和组件配置即可，不用重复写遍历逻辑。
• 全局通用的轻量组件（比如提示框、右键菜单）也可以封装为Vue自定义指令，用v-tooltip这类形式绑定到元素上，更符合Vue的使用习惯。
• 如果是服务端渲染的静态页面里零散分布的触发元素，用上述遍历挂载方案是最优解，不需要把整个页面改造为Vue组件树结构。

内容的提问来源于stack exchange，提问作者Alexander Mihailov