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

痛定思痛。 2023-02-15 10:02 11阅读 0赞

通常我们使用的是单个文件引入，但是这样就会有很多代码是重复的，怎样才能实现“**按需**“引入呢？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]

如上图 no\_started中引入no\_bac1，no\_bac2，no\_bac3，no\_bac4，怎么样才能代码看的美观呢？也就是按需引入。

--------------------

#### （1）这些被引入的文件放置在同一个文件下 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 1]

--------------------

#### （2）配置文件夹下的index.js 文件内容 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 2]

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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200604203736722.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200604204217929.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200604204240425.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70