Как я могу хранить набор компонентов для некоторых отдельных приложений VUE? - PullRequest
Новая
       7

Как я могу хранить набор компонентов для некоторых отдельных приложений VUE?

0 голосов
/ 18 февраля 2019

Я пишу собственный проект через Vue.js

У меня есть несколько приложений, которые включают в себя набор общих компонентов и уникальных компонентов.

Я хочу иметь возможность настраивать конфигурации для этихприложения, в которых я мог бы указать необходимые компоненты и данные для них, например: 

"load": [
    "Core.vue",
    "Accordion.vue",
    "Buttons.vue",
    "Table.vue",
    "etc"
],
"components": {
    "table": {
        "name": "title"
    },
    "accordion": {
        "tabs": {
            "tab1": {
                "name": 'tab1'
            },
            "tab2": {
                "name": 'tab2'
            }
        }
    }
}

, а затем компоненты берут эти данные и показывают их: 

<template>
  <div> {{ name }} </div>
</template>

<script>
  export default {
    name: "Table",
    props: ['name']
  }
</script>

Я думаю, что это можетбыть JSON или .yml файл (или любой другой формат), но я не понимаю, как их обрабатывать?

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Я думаю, вы ищете динамический компонент .таким образом, вы можете сохранить нужные компоненты в некотором json-файле, импортировать его в родительский компонент и динамически создавать дочерние элементы, например, если у вас есть файл jsonMap.json: 

{
   landingPage:{
      banners:['child1','child2']
   }
}

then landingPage.vue: 

<template>
<div>
  <component v-for="(banner,index) in getBanners" :is="banner" :key="index"</component>
   //this is a dynamic component. the 'is' attribute determine what it will be. 
</div>
</template>

<script>
import jsonMap from 'path/to/jsonMap'
import child1 from 'path/to/shared/components/child1.vue'
import child2 from 'path/to/shared/components/child2.vue'
import child3 from 'path/to/shared/components/child3.vue'

export default {

  name: 'landingPage',
  components:{child1,child2,child3},

  methods:{
    getBanners(){
      return jsonMap[this.name].banners
    }
  }
}
</script>

целевая страница будет отображать 2 баннера - согласно jsonMap.обратите внимание, что, несмотря на то, что вы должны импортировать и зарегистрировать ваши компоненты, это не может быть сделано динамически.

0 голосов
/ 18 февраля 2019

Я бы сделал компонент с именем ModuleLoader.vue, чтобы импортировать все ваши компоненты в массиве load.Затем создайте динамический компонент, который принимает вычисляемое свойство или просто опору для загрузки компонента.

App.vue 

<ModuleLoader
  v-for="(module, index) in modules"
  :key="`ModuleLoader_${index}`"
  v-bind="module"
/>

ModuleLoader.vue 

<component
  :is="moduleData.type"
  v-bind="moduleData.content"
/>

Вам потребуется ModuleData опора, и вам придется импортировать компоненты, которые вы 'повторная загрузка в этот файл

Проверьте это скрипка

...