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

Зная, что у меня, возможно, будет еще больше детей, есть ли другой способ сделать вложенный компонент в 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'
                    }
                }
            }
        }
    }
]

javascript vue.js vuejs2 components nested-loops

08.11.2018 16:36

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 491

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Спасибо, но это работает, если у вас только один компонент, не так ли? я не могу придумать способ сделать это с помощью динамического компонента

— 08.11.2018 17:49

08.11.2018 17:31

Ответ принят как подходящий

Для этого вы можете использовать функции рендеринга: 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>

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

Что делать, если у меня есть массив детей, а не только один ребенок, я не знаю, как реализовать ваш код для этого. Не могли бы вы помочь?

— 30.11.2018 15:08

08.11.2018 18:31