在 Vue.js 中动态实例化一个组件

Question

按照本教程，我尝试以编程方式在我的页面上创建组件的实例。

主要片段是这样的：

import Button from 'Button.vue'
import Vue from 'vue'
var ComponentClass = Vue.extend(Button)
var instance = new ComponentClass()
instance.$mount()
this.$refs.container.appendChild(instance.$el)

但是我得到两个错误：

1. 我试图实例化的组件包含对商店的引用，但这些引用不起作用："TypeError: Cannot read property 'state' of undefined"。

2. 对于片段 ( this.$refs.container.appendChild(instance.$el))的最后一行，我收到此错误：“未捕获的类型错误：无法读取未定义的属性‘容器’”

我真的不知道如何解决这个问题，如果 Vue.js 中的任何人都可以给我一些关于为什么我会收到这些错误并解决它们的提示，那将是非常棒的。

Answer 1

1) 由于您手动实例化该组件并且它不属于主应用程序的组件树，因此不会从根组件自动注入商店。实例化组件时，您必须手动将存储提供给构造函数。

import ProjectRow from "./ProjectRow.vue";
import Vue from "vue";
import store from "../store";

let ProjectRowClass = Vue.extend(ProjectRow);
let ProjectRowInstance = new ProjectRowClass({ store });

2) 在 Vue单文件组件 (SFC) 中，默认导出之外this不引用 Vue 实例，因此您无权访问$refs或任何其他 Vue 实例属性/方法。要访问 Vue 实例，您需要将此行移动this.$refs.container.appendChild(instance.$el)到默认导出内的某处，例如在mounted钩子中或您的methods.

有关如何进行此操作的示例，请参阅此CodeSandbox。