Vue JS에서 구성 요소를 동적으로 렌더링하는 방법

Vue JS에서 구성 요소를 동적으로 렌더링하는 방법

입력란이나 버튼 등에 컴포넌트를 사용하는 폼 제너레이터를 만들고 있습니다.전달되는 옵션에 따라 폼을 생성할 수 있기를 원합니다.

하지만 부품을 렌더링할 수 없습니다.

순수 HTML을 반환하려고 했지만 컴포넌트가 렌더링되지 않습니다.

집에서 폼제너레이터를 호출합니다.vue 템플릿에서는 다음과 같은 옵션개체가 있는 폼을 사용합니다.

options: {
    name: {
        type: 'input',
        label: 'Name'
    },
    submit: {
        type: 'button',
        label: 'Send'
    }
}

템플릿 내:

<template>
  <form-generator :options="options"></form-generator>
</template>

폼제너레이터 컴포넌트에서 다음과 같은 여러 가지 시도를 해 보았습니다.

<template>
  {{ generateForm(this.options) }}
  // ... or ...
  <div v-html="generateForm(this.options)"></div>
</template>

다음과 같은 모든 컴포넌트가 포함되어 있습니다.

import {
  FormButton,
  FormInput
} from './FormComponents'

이제 마지막 부분은 어떻게 하면FormInput렌더링할 수 있습니까?

이것은 문자 그대로 HTML을 출력하기 때문에 동작하지 않습니다.

methods: {
  generateForm(options) {

    // .. do stuff with options ..
    var form = '<form-input />'

    return form
  }
}

Vue는 매우 간단한 동적 구성 요소 생성 방법을 제공합니다.

<component :is="dynamicComponentName"></component>

따라서 옵션을 배열로 정의하고 유형을 구성 요소 이름으로 설정하는 것이 좋습니다.

options: [
   {
        type: 'FormInput',
        propsData: {label: 'Name'}
    },
    {
        type: 'FormButton',
        propsData: {label: 'Send'}
    }
]

그런 다음 폼 생성기에서 다음과 같이 사용합니다.

<component :is="option.type" v-for="option in options"></component>

다른 컴포넌트에 전달하듯이 속성을 전달할 수도 있지만 동적이며 각 컴포넌트마다 속성 세트가 다르기 때문에 오브젝트로 전달하고 각 컴포넌트는 필요한 데이터에 액세스합니다.

<component :is="option.type" v-for="option in options" :data="option.propsData"></component>

갱신하다

컴포넌트를 제어할 수 없기 때문에 조금 더 조작이 필요합니다.

텍스트가 필요한 각 구성 요소에 대해 옵션에 텍스트 속성을 추가합니다.

options: [
       {
            type: 'FormInput',
            propsData: {label: 'Name'}
        },
        {
            type: 'FormButton',
            text: 'Send',
            propsData: {label: 'Send'}
        }
    ]

그런 다음 컴포넌트에만 사용합니다.

<component :is="option.type" v-for="option in options">{{option.text}}</component>

패스 속성의 경우 v-bind를 사용하여 패스하면 자동으로 파기되므로 버튼에 2개의 소품을 넣을 수 있습니다.rounded, color옵션은 다음과 같습니다.

{
  type: 'FormButton',
  text: 'Button',
  propsData: {rounded: true, color: '#bada55'}
}

다음으로 컴포넌트:

<component :is="option.type" v-for="option in options" v-bind="option.propsData">{{option.text}}</component>

다음과 같이 어레이를 작성할 수 있습니다.

components_data: [
            {
                name: 'checkbox',
                data: false
            },
            {
                name: 'text',
                data: 'Hello world!'
            }
        ]

이 어레이를 통해 루프를 실행합니다.<component>:

<component
        v-for="(component,i) in components_data"
        :key="i"
        :is="component.name"
        :data="component.data"
    />

2개의 컴포넌트가 생성됩니다.[<text>, <checkbox>]소품을 통해 동적으로 데이터를 제공합니다.

이렇게 새로운 데이터를 푸시할 때components_data.push({name:'image',data: {url:'cat.jpg'}})새로운 컴포넌트를 렌더링합니다.<image :data="{url:'cat.jpg'}"/>

언급URL : https://stackoverflow.com/questions/46631134/how-to-render-components-dynamically-in-vue-js