Vue 道具更新 - 您可能在组件渲染函数中有无限更新循环答案

【问题标题】：Vue props update - You may have an infinite update loop in a component render functionVue 道具更新 - 您可能在组件渲染函数中有无限更新循环
【发布时间】：2019-02-12 18:39:26
【问题描述】：

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 时，它会给出错误提示 - “您可能在组件渲染函数中有无限更新循环”

【问题讨论】：

activateStep 在哪里被调用？
你能发布一个最小的工作示例来展示你如何使用你的组件吗？

标签： javascript vuejs2 vue-component

【解决方案1】：

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

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

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

this.$emit("step", step)

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

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

【讨论】：