vue.js - 在 Vue.js 中动态实例化组件

Question

关注 this tutorial ，我正在尝试以编程方式在我的页面上创建组件的实例。

主要片段是这样的:

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)

但是我得到两个错误:

我试图实例化的组件包含对商店的引用，这些引用不起作用:“TypeError:无法读取未定义的属性'状态'”。

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

我真的不知道如何解决这个问题，如果有 Vue.js 方面的强者可以给我一些提示，说明我为什么会遇到这些错误并解决它们，那将是非常棒的。

Answer 1

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

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 Single File Component (SFC) 中, 默认导出之外 this不引用 Vue 实例，因此您无权访问 $refs或任何其他 Vue 实例属性/方法。要访问 Vue 实例，您需要移动此行 this.$refs.container.appendChild(instance.$el)默认导出中的某处，例如 mounted钩或在您的 methods 之一内.

看到这个 CodeSandbox举个例子，你可以如何去做。