通常我們使用的是單個文件引入，但是這樣就會有很多代碼是重復的，怎樣才能實現“按需“引入呢？

如上圖 no_started中引入no_bac1，no_bac2，no_bac3，no_bac4，怎么樣才能代碼看的美觀呢？也就是按需引入。

---

（1）這些被引入的文件放置在同一個文件下

---

（2）配置文件夾下的index.js 文件內容

index.js

export { default as no1 } from './no_bac1.vue' export { default as no2 } from './no_bac2.vue' export { default as no3 } from './no_bac3.vue' export { default as no4 } from './no_bac4.vue'

export { default as vue文件名 } from ‘./vue文件名’;

---

(3)no_started中引入組件

<template><div class="no-start"><div class="bac bac1"><no1></no1></div><div class="bac bac2"><no2></no2></div><div class="bac bac3"><no3></no3></div><div class="bac bac4"><no4></no4></div></div> </template><script> import { mapState, mapMutations, mapActions } from 'vuex' import { no1, no2, no3, no4 } from '../components' export default {name: 'NoStart',data() {return {baigeiData: {}}},components: {no1,no2,no3,no4},computed: {},created() {},mounted() {},methods: {} } </script> 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue页面引入多个组件的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。