Vue.js 从v步进机中引用组件

我正在使用一个v步进器，希望在进行过程中收集结果。在最后一步中，我想使用所有这些结果来做一些事情。伪代码如下所示：

// MyStepper.vue
<v-stepper-content step="1">
  <SomeComponent ref="one"/>
  // This works so the ref is valid
  <v-btn text @click="this.$refs.one.runMethod()">Test</v-btn>
  <v-btn text @click="stepperNum++">Next</v-btn>
</v-stepper>
<v-stepper-content step="2">
  <SomeOtherComponent ref="two"/>
  // This works so the ref is valid
  <v-btn text @click="this.$refs.two.runMethod()">Test</v-btn>
  <v-btn text @click="stepperNum++">Next</v-btn>
</v-stepper>
<v-stepper-content step="3">
  <AnotherComponent v-if="canLoad"
   :one="$refs.one.results" 
   :two="$refs.two.results"/>
</v-stepper>

// SomeComponent.vue/SomeOtherComponent.vue
data: function() {
  return {
    results: [],
    stepperNum: 0
  }
}
methods: {
  runMethod() {
    console.log("Clicked");
  }
}
computed: {
  canLoad() {
    return this.stepperNum > 2;
  }
}

// AnotherComponent.vue
props: {
  one: {
    type: Array,
    required: true
  },
  two: {
    type: Array,
    required: true
  }
}

//MyStepper.vue
//这是有效的，因此ref是有效的
测验
下一个
//这是有效的，因此ref是有效的
测验
下一个
//SomeComponent.vue/SomeOtherComponent.vue
数据：函数（）{
返回{
结果：[]，
草原植物：0
}
}
方法：{
runMethod（）{
控制台日志（“单击”）；
}
}
计算：{
canLoad（）{
返回此值。步进数>2；
}
}
//另一个组件。vue
道具：{
一:{
类型：数组，
必填项：true
},
二:{
类型：数组，
必填项：true
}
}

当我运行该代码时，会收到一条“t.$refs.one未定义”消息。我假设这是因为在加载MyStepper.vue页面的同时加载了所有内容

在上一个v-stepper完成之前，是否有办法防止v-stepper加载其身体（又称AnotherComponent.vue）？是否有不同的策略可用于实现所需的功能

---

更新：我决定观察子组件内部的结果，并发出一个事件。父级使用发出的事件控制数据，启用/禁用下一步按钮，将结果传递给第三个组件，等等。

编辑：OP确认在使用计算属性的

参考内容时没有反应。将第一个代码块视为错误的方法。使用正则变量而不是引用


我想当加载两个引用时，我会选择返回
true
的计算属性：

computed: {
  canLoadThirdStep() {
    return (this.$refs.one && this.$refs.two)
  }
}

然后只需使用
v-if
中的返回值来显示另一个组件
：

<AnotherComponent 
  v-if="canLoadThirdStep" 
  :one="$refs.one.results" 
  :two="$refs.two.results" 
/>



我希望这就是你想要的。让我知道这是否有效
 嗨，谢谢！似乎当我跑步时，canLoadThirdStep永远不会返回trueHello！我不知道stepper是否卸载了传递的步骤，但值得检查一下：是否可以在computed属性中的
return
语句之前记录这两个引用？看起来computed在启动时只运行一次，并且返回未定义的两个。fwiw I更新了op中的代码，添加了一个v-btn，以测试ref是否实际有效（实际有效）。旁注-这最终不会有帮助，但我可以修改计算值来检查步进器编号，而不是REF。也许REF不能触发反应性行为，对不起，我对这种REF用例不太了解。是的，如果你用步进数值来代替，它应该是被动的，因为它是一个规则变量。我不知道为什么它会起作用，但是改变计算值来观察步进而不是参考值似乎是可行的。代码在OP中更新