呈现子组件后的启动方法

Question

我在父母中使用v-if来有条件地渲染子组件。 即使子项不应该渲染，挂载的函数仍会执行并导致控制台错误。

在渲染子组件时启动方法时，如何确保子组件被渲染。

就我而言，我正在使用自动对焦：

mounted: function () {
        // Autofocus input on load.
        this.$nextTick(() => this.$refs.input.focus());
    },

Error in nextTick: "TypeError: _this.$refs.input is undefined"

console.log（this。$ refs.input）提供对象：

<input class="form-control" data-v-661f7e55="" type="text" autocomplete="off">

Answer 1

尝试一下。

<input class="form-control" ref="input" type="text" autocomplete="off">

mounted(){
      this.$nextTick(() => this.$refs.input.focus())
    }

这对我来说很好用。ref用于注册对元素或子组件的引用。