javascript - Vue props update - 组件渲染函数中可能有无限更新循环

Question

Vue.component("step", {
        props: ["Model", "step"],
        data: function () {
            return {
                
            };
        },
        methods: {
            activateStep: function (step) {
                var vm = this;

                Vue.set(vm.Model, "ActiveStep", step);
            }
        }
});

<step inline-template :model="Model" step=SomeStepNumber>

</step>

当我尝试更新 vm.Model.ActiveStep 时，它给出错误消息 - “您在组件渲染函数中可能有无限更新循环”

Answer 1

您不应设置组件内的属性值。属性由父级设置并传递到组件中。错误是

Vue.set(vm.Model, "ActiveStep", step);

如果组件需要更新其父组件，惯用的方法是向父组件发出事件

this.$emit("step", step)

并让父组件根据需要更新属性。

如果需要双向绑定(bind)，可以使用 v-model或.sync modifier