Question

在我的vue项目中，我想从1.x升级到2.x.我遇到了以下问题：

<div id="demo">
  <service :service-name="serviceName" ref="testcomp" v-if="runTest"></service>
</div>

在子组件service上，我使用v-if来控制它的存在。在父组件中，我想使用this.$refs.testcomp来调用子组件中定义的方法test，如下所示：

  methods: {
    init() {
        this.runTest = true;
    },
  },
  mounted() {
    this.init();
  },
  watch: {
    runTest() {
        if(this.runTest)  {
        console.log('1');
        this.$refs.testcomp.test();
        console.log('2');
      }
    },
  },

但错误消息表明this.$refs.testcomp未定义。我用jsfiddle：https://jsfiddle.net/baoqger/0r4vby5n/1/

创建了现场演示

但是在vue1.x中，它可以很好地运行。 https://jsfiddle.net/baoqger/fzuajwkz/1/

我知道改为v-show，可以跳过这个问题。但是在我的真实项目中（这是一个很大的项目，由其他人开发。因此，如果我将v-if更改为v-show，它将触发与工作流程相关的其他问题）。那么有什么方法可以使v-if仍然可以在升级版本中运行。

Answer 1

我认为这是因为当你调用它时。$ refs.testcomp.test（）元素还没有准备好。试着这样做：

this.$nextTick(() =>{
    this.$refs.testcomp.test();
})

v-if表现不同：从vue项目1.x到2.x迁移

1 个答案: