摘要：对于声明的组件，我们先通过获取它的构造函数，再出一个组件实例，最后通过挂载到上。通过传入一个包含的对象，帮助我们创建一个继承了的子类，也就是我们之前需要的构造函数。好了，得到了构造函数，接下来的工作就简单了。
Vue 动态创建 component
在 angular 中 可以通过 ComponentFactoryResolver 来动态创建 component , 在平时使用 vue 的过程中也没有了解到这方面的信息。于是就花时间研究了一下。
Vue 的组件可以通过两种方式来声明，一种是通过 Vue.component，另外一种则是 Single File Components（SFC） 。
以下除非特别说明，组件都是全局注册的
Vue.component 方式首先来看 Vue.component 方式的。
Vue.component("button-counter",{
data: function () {
return {
count: 0
}
},
template: ""
});
在上面的代码中我们声明了一个叫做 button-counter 的组件。如果在常规情况下使用的话，只需要在页面上写对应的
那么通过编程方式怎么处理呢？
在官方文档中我们可以看到，我们可以通过 Vue.component("component-name") 的方式来获取到 组件。而组件实例又有 $mount 这样一个方法，官方对于 $mount 的解释如下：
$mount 方法有两个参数
{Element | string} [elementOrSelector]
{boolean} [hydrating]
If a Vue instance didn’t receive the el option at instantiation, it will be in “unmounted” state, without an associated DOM element. vm.$mount() can be used to manually start the mounting of an unmounted Vue instance.
If elementOrSelector argument is not provided, the template will be rendered as an off-document element, and you will have to use native DOM API to insert it into the document yourself.
The method returns the instance itself so you can chain other instance methods after it.
那我们是否可以通过这种方式来达到我们的需求呢？
还不够！
为什么？
因为 Vue.component 返回的结果是一个 function！它返回的并不是 组件实例，而是一个构造函数。
那到这里其实我们就清楚了。 对于 Vue.component 声明的组件，我们先通过 Vue.component 获取它的构造函数，再 new 出一个组件实例，最后 通过$mount 挂载到 html 上。
下面是完整的代码:
Vue.component("button-counter", {
data: function() {
return {
count: 0
};
},
template:
""
});
Vue.component("app", {
data: function() {
return {
count: 0
};
},
template:
" App Component
",
methods: {
insert() {
const component = Vue.component("button-counter");
const instance = new component();
instance.$mount("#appId");
}
}
});
new Vue({
el: "#app"
});
https://codepen.io/YoRolling/...
SFC在实际工作中，大部分都是用官方的脚手架 vue-cli 生成项目，用的也是 SFC 这种方式。
我们的 button-counter 如果用 SFC 方式实现的话应该是这样子的：
那么是否可以通过 export 出的对象来实现我们的需求呢？
首先我们来看，在 SFC 中， 我们在 script 中 export 了一个对象出去，那么通过这个对象应该是可以达到要求的。
先来看看 import 之后这个对象是什么样子的。
可以发现 import 得到的对象要比我们在 组件中声明的多了一些属性和方法。
在 Vue.component 模式中，我们先获取到组件的构造函数，然后构造实例，通过实例的一些方法来处理数据和挂载节点。
很显然，现有数据不能满足我们。如果我们能将这个对象转化成一个组件的构造函数，那我们就可以利用上面的方案来实现我们的需求了。
那么，究竟需要怎么转换呢？
没错！ 就是 Vue.extend 这个大兄 dei！我们看下官方的说明。
Create a “subclass” of the base Vue constructor. The argument should be an object containing component options.The special case to note here is the data option - it must be a function when used with Vue.extend().
通过传入一个包含 Component options 的对象， Vue.extend 帮助我们创建一个 继承了 Vue constructor 的子类，也就是我们之前需要的构造函数。
好了，得到了构造函数，接下来的工作就简单了 。实例化，然后挂载。
下面就是完整的代码：
在线查看 https://codesandbox.io/s/m59r3547zy
https://codesandbox.io/s/m59r...
结束Happy Ending。
到这里，通过编程的方式动态创建组件挂载到HTML 的两种方式就完成了。
再次感到看文档的重要性。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96263.html
摘要：在组件内，我们触及不到组件的模板，所以简单的在动态模板上添加并不能完成事件监听。简单来说，依赖收集是在渲染函数渲染的函数中进行的，在中一旦通过使用了这个变量，通过这个变量的就收集到了正在执行的渲染函数这一个依赖。 作为一个中后台表单&表格工程师，经常需要在一个页面中处理多个弹窗。我自己的项目中，一个复杂的审核页面中的弹窗数量超过了30个，如何管理大量的弹窗就成为了一个需要考虑的问题。 ...
摘要：事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中，子组件标签上使用指定一个名称，并在父组件内通过来访问指定名称的子组件。 学习笔记：组件详解 组件详解 组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。 全局注册 Vue.component(my-component, {}); 要在父实例中使用这个组件，必须要...
摘要：直接创建组件使用标签名组件模板，根据组件构造器来创建组件。相应的，实例也被称为父组件。而且不允许子组件直接修改父组件中的数据，强制修改会报错。 一、组件 （一）什么是组件 组件（Component）是 Vue.js最强大的功能之一。组件可以扩展 HTML元素，封装可重用的代码组件是自定义元素（对象）。 （二）创建组件的两种方式 官方推荐组件标签名是使用-连接的组合词，例如：。 1、使用...
摘要：直接创建组件使用标签名组件模板，根据组件构造器来创建组件。相应的，实例也被称为父组件。而且不允许子组件直接修改父组件中的数据，强制修改会报错。 一、组件 （一）什么是组件 组件（Component）是 Vue.js最强大的功能之一。组件可以扩展 HTML元素，封装可重用的代码组件是自定义元素（对象）。 （二）创建组件的两种方式 官方推荐组件标签名是使用-连接的组合词，例如：。 1、使用...
阅读 671·2023-04-25 19:53
阅读 4207·2021-09-22 15:13
阅读 2542·2019-08-30 10:56
阅读 1300·2019-08-29 16:27
阅读 2916·2019-08-29 14:00
阅读 2373·2019-08-26 13:56
阅读 397·2019-08-26 13:29
阅读 1594·2019-08-26 11:31
