动态添加属性到Vue组件

Question

我从数据库加载数据,驱动我显示的组件类型

AJAX调用关闭并返回一些数据(如果需要,可以重新调整)

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

这可以在我的父对象上访问一个名为component的变量

在我父对象的模板中,我有以下内容

<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来实现,因为我正在尝试这样做.

Answer 1

如果有人想知道如何使用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>

Answer 2

在此线程之后，我看到了两个选项来执行此操作。

一种是传递一个本身就是一个对象的 prop，并传递其中可以被子组件使用的所有相关键值，如下所示：

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

提到的其他解决方案是有一个指令，您可以在其中传递对象，并将该对象中的键属性设置为相应的值，您可以在此处查看工作中的内容。

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>