vue.js - 没有传递给动态组件的道具

Question

我正在渲染一个动态组件：

<component :is="element.name == 'text' ? element.component : false" v-bind="elementProps"></component>

和：

computed: {
    element() {
        return {
            name: this.elementObject.type,
            component: {
                components: { TextInput },
                template: `<text-input :form-id="formId"
                                        :section-id="sectionId"
                                        :element-id="elementId"
                                        id="test2"
                            ></text-input>`
            },
        }
    },
    elementProps() {
        const props = {
            formId: this.formId,
            sectionId: this.sectionId,
            elementId: this.elementId,
            id: this.generateId()
        };
        return props;
    },
}

..但我得到了一个错误，Property or method "formId" is not defined on the instance but referenced during render.虽然我传递了道具。我究竟做错了什么？

Answer 1

您在元素函数中创建组件时忘记定义道具，请尝试：

component: {
  components: { TextInput },
  template: `<text-input :form-id="formId"
                         :section-id="sectionId"
                         :element-id="elementId"
                         id="test2"></text-input>`,
  props: ['formId', 'sectionId', 'elementId', 'id']
},

formId，sectionId并且elementId在模板中必须在组件中的某处定义为props、data或计算属性。