动态导入组件后，Vue 无法获取挂载在 nextTick 上的引用？

Question

我正在使用 Nuxt js 和 Element UI。我在插件文件夹中动态导入了元素 UI 插件。

export default () => {
  Vue.component("ElForm", () => import("element-ui/lib/form"));
  Vue.component("ElFormItem", () => import("element-ui/lib/form-item"));
  Vue.component("ElInput", () => import("element-ui/lib/input"));
  ......
}

现在，当我打开一个模态对话框时，里面有一个组件。它 returns 引用错误。这可能是因为组件尚未加载。我该如何处理这种情况？甚至 nextTick 也不起作用。

<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      v-loading="loading"
      @submit.prevent.native="submitOnReturn"
    >
      <el-form-item label="Title" prop="title">
        <el-input v-model="form.title" ref="inputField" :autofocus="true" />
      </el-form-item>
      <el-form-item label="Details" prop="body">
        <el-input v-model="form.body" type="textarea" :rows="4" />
      </el-form-item>
      <el-form-item class="form-buttons">
        <el-button type="" @click="cancel">Cancel</el-button>
        <el-button type="primary" @click="updateProductFaq" v-if="editMode"
          >Update</el-button
        >
        <el-button type="primary" @click="addProductFaq" v-else>Save</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

  mounted() {
    this.$nextTick(() => {
      // focus input on mount
      this.$refs.inputField.focus();
      this.$refs.ruleForm.clearValidate();
    });
  },

this.$refs.inputField 未定义

Answer 1

el-input 的模板引用在包含组件的 mounted 挂钩中不可用，因为输入是异步呈现的。

一种解决方法是为 el-input 的 hook:mounted 事件（通过组件的 mounted 挂钩发生）添加一个处理程序，其中模板引用将被填充：

<el-input ref="inputField" @hook:mounted="$refs.inputField.focus()" />

demo

动态导入组件后，Vue 无法获取挂载在 nextTick 上的引用？

Vue cannot get refs on mounted on nextTick after dynamically importing the component?

javascript

vue.js

vue-component

nuxt.js