Vuejs вложенный динамический компонент - PullRequest
Новая
       8

Vuejs вложенный динамический компонент

0 голосов
/ 08 ноября 2018

Зная, что, возможно, у меня будет еще больше детей, есть ли другой способ сделать вложенный компонент в VueJS?

Я не знаю заранее, какой компонент будет в коде, поэтому я использую динамические, но у них всегда будет несколько дочерних элементов и не всегда одинаковое количество

Вот единственное решение, которое я нашел Есть ли другой способ для этого?

Из моего html: 

<component :is="blocksElements[0].componentId">
    <component :is="blocksElements[0].child.componentId" v-if="blocksElements[0].hasChild">
        <component :is="blocksElements[0].child.child.componentId" v-if="blocksElements[0].child.hasChild" v-bind="blocksElements[0].child.child.props">
            <component :is="blocksElements[0].child.child.child.componentId" v-if="blocksElements[0].child.child.hasChild" v-bind="blocksElements[0].child.child.child.props"></component>
        </component>
    </component>
</component>

Из моего JS: 

blocksElements: [
    {
        componentId: 'row',
        hasChild: true,
        child: {
            componentId: 'column',
            hasChild: true,
            child: {
                componentId: 'block-image',
                hasChild: true,
                props: {
                    logo: true,
                    width: '120'
                },
                child: {
                    componentId: 'block-image',
                    hasChild: false,
                    props: {
                        logo: true,
                        width: '120'
                    }
                }
            }
        }
    }
]

Ответы [ 2 ]

0 голосов
/ 08 ноября 2018

Для этого можно использовать функции рендеринга: https://vuejs.org/v2/guide/render-function.html

Вот пример (я написал это очень быстро, чтобы вы могли улучшить его дальше): 

<script>
import Row from './Row.vue'
import Column from './Column.vue'
import BlockImage from './BlockImage.vue'

export default {
  components: {
    Row,
    Column,
    BlockImage
  },
  data () {
    return {
      blocksElements: [
      {
        componentId: 'row',
        hasChild: true,
        child: {
          componentId: 'column',
          hasChild: true,
          child: {
            componentId: 'block-image',
            hasChild: true,
            props: {
              logo: true,
              width: '120'
            },
            child: {
              componentId: 'block-image',
              hasChild: false,
              props: {
                logo: false,
                width: '130'
              }
            }
          }
        }
      }
      ]
    }
  },

  render: function (h) {
    let els = []
    let result = null
    const buildElementBlocks = function (el) {
      els.unshift(el)
      if (el.hasChild) {
        return buildElementBlocks(el.child)
      }
      result = h(el.componentId, { props: el.props })
      els
        .splice(1)
        .forEach(element => {
          result = h(element.componentId, {
            props: element.props
          }, [result])
        })
    }
    buildElementBlocks(this.$data.blocksElements[0])
    return result
  }
}
</script>

Надеюсь, это поможет!

0 голосов
/ 08 ноября 2018

Да, существует, используйте древовидное меню, пример для vue.js: https://br.vuejs.org/v2/examples/tree-view.html, Это рекурсия.

...