如何遍历多个div类名动态初始化Vue.js多实例

实现方案 #

基础版（仅动态挂载所有todo-list元素） #

直接通过DOM选择器获取所有.todo-list元素，遍历初始化Vue实例即可，修改你的main.js代码如下：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 获取所有class为todo-list的元素
const todoListEls = document.querySelectorAll('.todo-list')

// 遍历每个元素初始化Vue实例
todoListEls.forEach(el => {
  new Vue({
    el,
    render: h => h(App)
  })
})

这样不管你页面上有多少个class为todo-list的元素，都会自动挂载Vue实例，不需要手动逐个写初始化代码。

进阶版（支持不同实例渲染不同业务数据） #

如果要给每个待办列表传不同的业务数据，可以通过DOM自定义属性传递参数，步骤如下：

1. 给HTML的元素添加自定义属性存储业务数据，比如：

<div id="todo-list-1" class="todo-list" data-list-id="1" data-todos='["买牛奶", "写代码"]'></div>
<div id="todo-list-2" class="todo-list" data-list-id="2" data-todos='["跑步", "看书"]'></div>
<div id="todo-list-3" class="todo-list" data-list-id="3" data-todos='["打扫卫生", "约朋友吃饭"]'></div>

2. 修改main.js代码，读取自定义属性并传给App组件：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

const todoListEls = document.querySelectorAll('.todo-list')

todoListEls.forEach(el => {
  // 读取DOM上的自定义属性数据
  const listId = el.dataset.listId
  const todos = JSON.parse(el.dataset.todos || '[]')
  
  new Vue({
    el,
    render: h => h(App, {
      // 给App组件传递props
      props: {
        listId,
        todos
      }
    })
  })
})

3. 修改App.vue接收props并渲染：

<template>
  <div class="todo-app">
    <h2>待办列表 {{ listId }}</h2>
    <ul>
      <li v-for="(item, index) in todos" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  // 声明接收的props
  props: {
    listId: {
      type: String,
      default: ''
    },
    todos: {
      type: Array,
      default: () => []
    }
  }
}
</script>

这样每个Vue实例都会读取对应DOM上的自定义数据，渲染出不同的待办列表，完全符合你多实例、不同业务数据的需求。

内容的提问来源于stack exchange，提问作者Rain Man