vue2动态创建组件
时间: 2023-08-02 09:13:11 浏览: 631
在 Vue2 中,我们可以通过 `Vue.extend()` 方法动态创建组件。具体步骤如下:
1. 使用 `Vue.extend()` 方法创建一个组件构造器,该构造器可以接收一个组件配置对象作为参数。
```
const MyComponent = Vue.extend({
template: '<div>Hello World!</div>'
})
```
2. 使用 `new` 关键字创建组件实例。
```
const myComponentInstance = new MyComponent()
```
3. 将组件实例挂载到某个元素上。
```
myComponentInstance.$mount('#app')
```
完整的示例代码如下:
```
// 定义组件构造器
const MyComponent = Vue.extend({
template: '<div>Hello World!</div>'
})
// 创建组件实例并挂载到 #app 元素上
const myComponentInstance = new MyComponent()
myComponentInstance.$mount('#app')
```
这样就可以在页面上看到一个显示 "Hello World!" 的组件了。
阅读全文
相关推荐

















