Vue中父组件调用子组件导致数据回显失败

问题的起因

<el-row v-if="t.stepType === 'stewing'">
              <recipesStewing ref='recipesstewing' :routeStepId='routeStepId'>
              </recipesStewing>
</el-row>

我正在通过后台传递过来的 stepType 的值来渲染组件，传过来的值可能有多个。
在通过也面的点击事件在触发方法

  case 'stewing':
              this.$refs.recipesstewing[0].getList(id);
            break;

调用子组件的方法来进行gitlist（）方法来对子组件进行赋值

此时问题就出现了就在 recipesstewing[0] 上，由于 this.$refs.recipesstewing是一个数组——由于后台传递过来的stepType 为stewing的有多个。所有只有在索引为0的子组件能够正常的双向绑定，其他索引位置的组件不能够回显正确的值回去造成的现象就为，一个组件能真确的双向绑定，其余的不能，在子组件debug的时候还看不出问题所在，值能正确的赋值，但是页面就是没效果。

解决方案

在处理这个bug的时候，需要根据索引，名称等其他能判断的条件来判断加载的gitlist()方法

 case 'stewing':
            let length = this.$refs.recipesstewing.length;
            for (let i = 0; i < length; i++) {
            if()//能够确定当前加载的是那个组件的条件
              this.$refs.recipesstewing[i].getList(id);
            }
            break;

这样就能够正确的回显你点击页面按钮绑定上对应的值了