关注
客服
刷新
更多
编辑
回到顶部
回到底部
客服二维码

vue页面引入多个组件的方法

通常我们使用的是单个文件引入,但是这样就会有很多代码是重复的,怎样才能实现vue页面引入多个组件的方法?

在这里插入图片描述

1. 把需要引入的文件放入到components文件夹中。

在这里插入图片描述
2. 将components中的文件引入到index.js中。

在这里插入图片描述
index.js

export { default as A } from "./a.vue"
export { default as B } from "./b.vue"
export { default as C } from "./c.vue"

3. 在home.vue中引入组件

<template>
<div class="home">
<A></A>
<B></B>
<C></C>
</div>
</template>
<script>
import { A, B, C } from "../components/index";
export default {
components: {
A,
B,
C,
},
};
</script>
posted @   勋染  阅读(89)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示