Question

我想无限次地嵌套和渲染组件（视用户需要而定）。想象一下，用户可以添加<div>个元素，选择它们并将它们分组为一个<div>且没有选中的<div>作为子元素。类似于允许对形状进行分组的图形编辑器。

这是我的代码（经过简化）：

<template>
  <el
    v-for="element in elements"
    :children="element.children">
    <el
      v-for="child in element.children"
      :children="child.children">
    </el>
  </el>
</template>

<script>
import El from '../components/Element'

export default {
  name: 'Canvas',
  components: {
    El
  },
  data () {
    return {
      elements: [],
      elementCounter: 0
    }
  },
  createElement (e) {
    // Create a new default element
    this.elements.push({
      id: this.elementCounter++,
      children: []
    })
  },
  groupElements (e) {

      let children = []

      // Move them into a new array
      for (var i = 0; i <= this.elements.length; i++) {
        // Cache current element
        let currentEl = this.elements[i]

        // Cut from old array
        this.elements.splice(i, 1)
        // Add to new array
        children.push(currentEl)
        // Since the length of elements
        // array was reduced by 1, we need
        // to adjust the index position
        i--
      }

      let parent = {
        id: this.elementCounter++,
        children: children
      }

      // Create the new parent element together with children
      this.elements.push(parent)
    }
  }
</script>

Vue呈现存储在this.elements中的所有元素。选择并分组其中的多个后，它们将从this.elements中删除，并添加到新创建的父元素parent.children中。然后将父级添加到this.elements。

到目前为止还不错，但是如果将父级与另一个元素（或父级）组合在一起，则不再渲染第二代中的子级，因为在我的<template>中我只有两个级别的<el < / p>

问题是：该代码的结构如何才能使无限级别的分组成为可能？

谢谢！

通过插槽无限嵌套组件

0 个答案: