vue函数里怎么使用import加载组件
时间: 2024-01-07 19:02:54 浏览: 23
在Vue函数里使用`import`加载组件,需要注意以下几点:
1. 因为`import`是异步加载模块的方式,所以需要使用`async/await`或者`Promise`来处理异步加载的结果。
2. 在Vue函数里,组件需要先注册再使用。因此,在使用`import`加载组件之前,需要先使用`Vue.component`方法注册该组件。
下面是一个示例代码:
```
import Vue from 'vue'
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
// 先注册组件
Vue.component('ComponentA', ComponentA)
Vue.component('ComponentB', ComponentB)
// Vue函数
new Vue({
el: '#app',
data: {
currentComponent: 'ComponentA'
},
methods: {
async loadComponentB() {
// 使用async/await方式加载组件
const { default: ComponentB } = await import('./components/ComponentB.vue')
Vue.component('ComponentB', ComponentB)
this.currentComponent = 'ComponentB'
},
loadComponentC() {
// 使用Promise方式加载组件
import('./components/ComponentC.vue').then(({ default: ComponentC }) => {
Vue.component('ComponentC', ComponentC)
this.currentComponent = 'ComponentC'
})
}
}
})
```
在上面的示例代码中,首先使用`Vue.component`方法注册了`ComponentA`和`ComponentB`两个组件。然后,在`loadComponentB`方法中,使用`async/await`方式加载`ComponentB`组件,并注册该组件;在`loadComponentC`方法中,使用`Promise`方式加载`ComponentC`组件,并注册该组件。最后,通过修改`currentComponent`的值来动态显示不同的组件。