Vue 컴포넌트에 동적으로 속성 추가

Vue 컴포넌트에 동적으로 속성 추가

표시하는 컴포넌트 유형을 구동하는 데이터베이스에서 데이터를 로드하고 있습니다.

AJAX 콜이 종료되어 데이터가 반환된다(필요에 따라 재구성할 수 있다).

{
  component_type: 'list-item',
  props: {
    name: 'test',
    value: 'some value'
  }
}

이것은 부모 개체에서 컴포넌트라는 변수에 액세스할 수 있습니다.

부모 오브젝트의 템플릿에는 다음과 같은 것이 있습니다.

<component :is="component.component_type" ></component>

이렇게 하면 정상적으로 동작하며 컴포넌트가 올바르게 로드됩니다.

다음으로 데이터 객체의 속성을 이 태그에도 추가합니다.

<component :is="component.component_type" {{ component.props }} ></component>

이것은 동작하지 않고, {{}가 들어간 태그의 기입을 거부합니다.이것은 Vue가 아닌 브라우저에 의해 발생한 오류라고 생각합니다만, 잘 모르겠습니다.

참고로 실제 출력은 다음과 같습니다.

<component :is="component.component_type" name='test' value='some value' ></component>

이 물건들은 어떻게 지나가야 하죠?이상적으로는, 이러한 것을, 그림과 같이 부모의 데이터나 소품에 묶어서, 데이타베이스내에서 간단하게 변경할 수 있도록 하고, 거기에 따라서 UI도 변경해 주었으면 합니다.

최악의 경우 서버 측에서 모두 생성하지만, 현재 시도하고 있는 것처럼 Ajax를 통해 생성하는 것이 좋습니다.

Vue 2를 사용하여 이 작업을 수행하는 방법이 궁금할 경우 v-bind에 개체를 전달하면 됩니다.

<template>
    <component :is="componentType" v-bind="props"></component>
</template>

<script>
    export default {
        data() {
            return {
                componentType: 'my-component',
                props: {
                    foo: 'foofoo',
                    bar: 'barbar'
                }
            }
        }
    }
</script>

이 스레드 뒤에 두 가지 옵션이 있습니다.

하나는 객체 자체인 단일 소품을 전달하고 하위 구성요소에서 사용할 수 있는 모든 관련 키 값을 전달하는 것입니다. 예를 들어 다음과 같습니다.

<component :is="component. component_type"
        :options="component.props"
</component>

또 다른 솔루션으로는 명령어를 사용하여 객체를 전달하면 해당 객체의 키인 Atribute를 대응하는 값으로 설정합니다.여기서 보실 수 있습니다.

Vue.directive('props', {
        priority: 3000,
    bind() {

        // set the last component child as the current
        let comp = this.vm.$children[this.vm.$children.length - 1];
        let values = null;
        if(this._scope && this._scope.$eval) {
            values = this._scope.$eval(this.expression);
        } else {
            values = this.vm.$eval(this.expression);
        }
        if(typeof values !== 'object' || values instanceof Array) {
            values = { data: values };
        }

        // apply properties to component data
        for(let key in values) {
            if(values.hasOwnProperty(key)) {
                let hkey = this.hyphenate(key);
                let val = values[key];
                if(typeof val === 'string') {
                    comp.$options.el.setAttribute(hkey, values[key]);
                } else {
                    comp.$options.el.setAttribute(':' + hkey, values[key]);
                }
            }
        }

                console.log(comp.$options.el.outerHTML);
        comp._initState();
    },

    /*
     * Hyphenate a camelCase string.
     */
    hyphenate(str) {
        let hyphenateRE = /([a-z\d])([A-Z])/g;
        return str.replace(hyphenateRE, '$1-$2').toLowerCase();
    }
});

다음과 같이 사용합니다.

<div class="app">
    <component is="component.component_type" v-props="component.props"></component>
</div>

제가 알기로는 Vue.js 템플릿에는 레스트 소품(스프레드 소품) 구문이 없습니다.

가능한 솔루션은 렌더 함수입니다.렌더 함수를 사용하면 JavaScript의 모든 기능을 사용할 수 있으므로 다음과 같은 작업을 수행할 수 있습니다.

render (h) {
  return h('foo', {
    props: {
      ...yourData
    }
  })
}

여기서 간단한 예를 작성했습니다.http://codepen.io/CodinCat/pen/bgoVrw?editors=1010

양쪽 컴포넌트 타입(예:foo소품은 역동적일 수 있습니다(단, 가능한 모든 소품 필드(예:a,b그리고.c(자녀 컴포넌트 내)

또 다른 해결책은 JSX입니다.

JSX babel 플러그인을 사용합니다.https://github.com/vuejs/babel-plugin-transform-vue-jsx

그런 다음 확장 소품 구문을 사용할 수 있습니다.

return <foo {...{yourData}}></foo>

언급URL : https://stackoverflow.com/questions/41864020/dynamically-add-properties-to-vue-component