代码之家 › 专栏 › 技术社区 › eozzy

未传递到动态组件的道具

vue-dynamic-components vuejs2 vue.js

0

eozzy · 技术社区 · 6 年前

我正在渲染动态组件:

<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. 虽然我在传递道具。我做错了什么?

1 回复 | 直到 6 年前

1

akuiper 6 年前

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

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 在模板中,必须在组件中的某个位置定义为道具 , 数据或 计算属性 .