vue.js - 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>

我怎样才能传递这些属性？理想情况下，我希望这些与我所展示的父项的数据/ Prop 相关联，以便可以轻松地在数据库中更改它们，并且 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>