子组件渲染后的启动方法

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 用于注册对元素或子组件的引用。