Vue.js 为 Vue 组件动态添加属性

在这thread个选项之后，我看到了两个选项.

一种方法是传递一个单独的props ，props 本身就是一个对象，并传递其中所有可由子组件使用的相关键值，如下所示:

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

提到的另一个解决方案是有一个指令，在这里你传递对象，它会将该对象中的键属性设置为相应的值，你可以在work here中看到这一点.

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>