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

接下来，我将尝试以编程方式在页面上创建组件的实例

主要代码段如下：

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:无法读取未定义的属性'state'

对于代码段的最后一行（

this.$refs.container.appendChild（instance.$el）

），我收到以下错误：“Uncaught TypeError:无法读取未定义的属性‘container’”

我真的不知道如何解决这个问题，如果Vue.js中有人能给我一些提示，告诉我为什么会出现这些错误，并解决它们，那将是非常棒的。

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中，在默认导出之外，

此

不引用Vue实例，因此您无权访问

$refs

或任何其他Vue实例属性/方法。要获得对Vue实例的访问权，您需要将此行

this.$refs.container.appendChild（instance.$el）

移动到默认导出中的某个位置，例如在

挂载的
钩子中或在一个
方法中

查看此示例了解如何执行此操作。
它通过将“this”指定给属性“parent”来工作。通过设置父对象，您还可以访问新实例中的$store。（当然，前提是“this”是另一个Vue实例/组件，并且已经可以访问存储）

如果不需要对父对象的引用，可以将“parent:this”保留在外

重要提示：以这种方式在页面上安装许多（如500多个）项目时，您将获得巨大的性能打击。最好只通过道具为新组件提供必要的内容，而不是为其提供整个“this”对象。
这是在Vue.js中实例化组件的另一种方法，您可以使用两个不同的根元素

//实例化主应用程序
var app=新的Vue({
el:“#应用程序”，
数据：{
消息：“你好，Vue！”
}
})
//
//然后动态实例化组件
//
//创建或导入组件。
康斯特你好={
道具：['text']，
模板：“{text}}”，
};
//通过Vue创建componentClass。
const HelloCtor=Vue.extend（Hello）；
//使用componentClass实例化组件。
const vm=新HelloCtor({
propsData：{
文字：“嗨：）”
}
})
//然后将其安装到一个元素上。
.$mount（“#mount”）；
您是否有引用了容器的元素<代码>
很好，不幸的是，在我的模板中添加了
之后，我仍然会遇到同样的两个错误。你能发布一个运行的示例吗？我的整个代码都暴露了。另外，我不知道如何在Jsfiddle这样的网站上上传完整的Webpack/Vue项目，这可能吗？我认为在调用
$refs
时，dom还没有创建。相反，将其放入导出模块中的方法中，就像您引用的教程一样。这似乎有效！你知道我如何把这个组件注入到一个不同的组件中吗？因此，不要使用
this.$refs.container.appendChild（ProjectRowInstance.$el）
，类似于另一个组件$refs.container.appendChild（ProjectRowInstance.el）。有没有办法做到这一点？@drake035您应该能够使用
$root
和
$parent
向上遍历组件树，并使用
$refs
向下遍历组件树，如中所述。例如，请看。非常感谢您的帮助！当我分配时，parent：这不是单独分配store、router、i18n，而是我得到一个vue警告，“避免直接改变道具，因为每当父组件重新呈现时，该值将被覆盖。”。。。即使我使用computed属性来使用内部道具的信息。。。你知道是什么引起的吗？就像上面说的，你可能在某个地方“设置”了这个值（覆盖它）。您必须实际更新外部值（源），而不是您可以从内部访问的值。对于内部值，它用于使用/查看/显示它，而不是更新它。所以在源代码中更新它，或者如果这不起作用，你可以克隆值并更新它？取决于你想要达到什么我知道，但我不会把它放在任何地方，它只是为了展示。。。我还使用了返回属性值的computed属性，所以基本上除了在该属性中，我不会在任何地方使用它。。。问题是，警告只有在我发送了家长后才会出现。。。如果我发送存储、路由器等。。另外，警告不会出现：/I我不知道您的代码，但有时甚至在“计算”值时，您实际上正在修改它。首先要做的是将计算函数中的传入数据“克隆”到一个真正的新函数中。此外，我更新了我的答案，因为前一个答案很旧，我已经找到了更好的方法。那么试试看吧？我现在放弃了发送家长的想法，我只需要单独发送我需要的，我有优先级更高的任务，我稍后会回来。。。但是谢谢你的帮助。。。
new (Vue.extend(YourNewComponent))({
    parent: this,
    propsData: {
        whatever: 'some value',
    },
}).$mount(el.querySelector('.some-id'))