组件实例未定义

Question

我这样创建Vue / Vuetify组件：

let item = this.$createElement(ComponentName, {
   props: {
       displayField: this.displayField,
       valueField: this.valueField,
       childrenField: this.childrenField,
       level: this.level + 1,
       checkboxes: this.checkboxes,
       items: child,
       parentNode: this,
       root: this.root
    }
});

我需要获取项的componentInstance属性。如果我这样做的话：

console.log(item.componentInstance);
console.log(item);

我看到item.componentInstance是undefined。但是，当我在控制台中调查item时，我看到它具有这个componentInstance属性，而没有undefined。这是这两个命令的屏幕截图：

那么，这有什么问题呢？如何以编程方式访问此componentInstance？

Answer 1

当您写console.log(object)时，浏览器会在内存中记录对该对象的引用。因此，当您尝试在运行时检查它时，您将看到该对象处于其当前状态，而不是执行console.log时的状态。

因此，这里发生的事情是，当您在组件创建时显式访问item.componentInstance时，它尚未定义。如果您当时可以查看项目的快照（例如console.log(JSON.stringify(item))），则可以确认componentInstance确实是未定义的（实际上，stringify在这里不起作用，因为Vue使用循环在其内部结构中引用，并且您不能stringify这样的对象）

但是，当您执行console.log(item)时，会将对对象的引用记录在内存中。因此，当它显示在控制台中并单击它时，该组件已经安装并呈现，并且从您要求对其进行记录以来，其属性已经更改

如果您的处理很简单并且只需进行一次，将其移至mounted()即可解决问题。

并且如果您要进行动态处理（例如，新的动态组件），则需要进行更复杂的处理，则需要等待它们实际呈现，然后才能访问它们的componentInstance。因此，您应该使用Vue.nextTick（如果使用SFC，则使用this.$nextTick）包装用于访问呈现的元素（例如componentInstance）的代码

Answer 2

您将得到 undefined （未定义），因为该组件的DOM尚未更新。因此您必须使用nextTcik功能。

，您可以尝试以下解决方案：

let item = this.$createElement(ComponentName, {
   props: {
       displayField: this.displayField,
       valueField: this.valueField,
       childrenField: this.childrenField,
       level: this.level + 1,
       checkboxes: this.checkboxes,
       items: child,
       parentNode: this,
       root: this.root
    }
});
this.nextTick(() => {
      console.log(item.componentInstance);
      console.log(item);
      });