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

Question

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

主要的sn-p是这样的：

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. 对于 sn-p (this.$refs.container.appendChild(instance.$el)) 的最后一行，我收到此错误：“Uncaught TypeError: Cannot read property 'container' of undefined”

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

Answer 1

我沿着这条路走，遵循上面所有的例子，甚至是这个：https://css-tricks.com/creating-vue-js-component-instances-programmatically/

虽然我走得很远，而且它可以工作（我用这种方法制作了很多组件），但至少就我而言，它有缺点。例如我同时使用 Vuetify，动态添加的组件不属于外部表单，这意味着虽然本地（每个组件）验证有效，但表单没有收到整体状态。另一件不起作用的事情是禁用表单。随着更多的工作，将表单作为父属性传递，其中一些工作开始了，但是 删除 组件呢。那并不顺利。虽然它们是不可见的，但它们并没有真正被删除（内存泄漏）。

所以我改用渲染函数。它实际上要容易得多，有据可查（Vue 2 和 Vue 3），而且一切正常。我也从这个项目中得到了很好的帮助：https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/

基本上，要动态添加函数，只需实现render() 函数，而不是使用模板。工作起来有点像 React。你可以在这里实现任何逻辑来选择标签、选项，一切。只需返回它，Vue 就会构建 shadow-DOM 并保持真实 DOM 处于最新状态。

这里的方法似乎直接操作 DOM，我很高兴我不再需要这样做。

Answer 2

它通过将“this”分配给属性“parent”来工作。通过设置父级，您还可以访问新实例中的 $store。 （前提是“this”是另一个 Vue 实例/组件，当然已经可以访问 store）

new (Vue.extend(YourNewComponent))({
    parent: this,
    propsData: {
        whatever: 'some value',
    },
}).$mount(el.querySelector('.some-id'))

如果您不需要对父级的引用，则可以将“父级：this”留出。

重要提示：当以这种方式在页面上安装许多（如 500 多个）项目时，您将获得巨大的性能影响。最好只通过 props 给新组件提供必要的东西，而不是给它整个“this”对象。

Answer 3

这是在 Vue.js 中实例化组件的另一种方式，您可以使用两个不同的根元素。

// Instantiate you main app
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

//
// Then instantiate your component dynamically
//

// Create a component or import it.
const Hello = {
  props: ['text'],
  template: '<div class="hello">{{ text }}</div>',
};

// Create a componentClass by Vue.
const HelloCtor = Vue.extend(Hello);

// Use componentClass to instantiate your component.
const vm = new HelloCtor({
  propsData: {
    text: 'HI :)'
  }
})
// then mount it to an element.
.$mount('#mount');

Answer 4

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

请参阅此CodeSandbox，了解如何处理此问题的示例。