vue页面引入多个组件
时间: 2023-09-02 15:14:22 浏览: 113
vue组件开发
可以在Vue页面中引入多个组件,有两种方式:
1. 直接在Vue组件中注册
```vue
<template>
<div>
<my-component1></my-component1>
<my-component2></my-component2>
</div>
</template>
<script>
import MyComponent1 from "./MyComponent1.vue";
import MyComponent2 from "./MyComponent2.vue";
export default {
components: {
MyComponent1,
MyComponent2
}
};
</script>
```
2. 在Vue组件中通过路由懒加载方式引入
```vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
components: {},
created() {}
};
</script>
```
在路由配置文件中引入:
```javascript
import Vue from "vue";
import Router from "vue-router";
const MyComponent1 = () => import("./MyComponent1.vue");
const MyComponent2 = () => import("./MyComponent2.vue");
Vue.use(Router);
export default new Router({
routes: [
{
path: "/",
name: "Home",
component: MyComponent1
},
{
path: "/about",
name: "About",
component: MyComponent2
}
]
});
```
阅读全文