道具未传递到动态组件

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 或计算属性。