什么？你还不知道批量注册组件的方法？（Vue2）

林小饼
368 阅读1分钟

前期准备工作

  • 找一处风水宝地 , cmd一下
  • vue create vue-components
  • 选择 vue 2
  • cd vue-components
  • yarn serve
  • 删除 无用的组件
  • 重置 App.vue
  • 创建四个子组件：
    • src/components/Header/index.vue
    • src/components/Table/index.vue
    • src/components/Avatar/index.vue
    • src/components/Footer/index.vue
  • 子组件简单放点内容，如：我是头像组件 image.png

1、局部注册组件

App.vue里面：引入、注册、使用

<template>
  <div>
    <!-- 3.使用子组件 -->
    <Header></Header>
    <hr>
    <Table></Table>
    <hr>
    <Avatar></Avatar>
    <hr>
    <Footer></Footer>
  </div>
</template>

<script>
// ◆局部注册
// 1.引入子组件
import Header from '@/components/Header'
import Table from '@/components/Table'
import Avatar from '@/components/Avatar'
import Footer from '@/components/Footer'

export default {
  name: 'VueComponentsApp',
  // 2.注册子组件
  components:{
    Header,
    Table,
    Avatar,
    Footer
  }
};
</script>

image.png

image.png

注意：局部注册的组件只能在当前页面使用，其他页面想使用，必须重新引入、注册、使用。所以，一个组件如果只在当前页面使用一次，可以采用局部注册。

2、全局注册组件之法一

第一步：main.js里面

import Vue from 'vue'
import App from './App.vue'

// 1.引入组件
import Header from '@/components/Header'
import Table from '@/components/Table'
import Avatar from '@/components/Avatar'
import Footer from '@/components/Footer'
// 2.注册全局组件
Vue.component('Header',Header)
Vue.component('Table',Table)
Vue.component('Avatar',Avatar)
Vue.component('Footer',Footer)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

第二步：在页面需要的地方放入组件占位符即可

 <Header></Header>
 <Table></Table>
 <Avatar></Avatar>
 <Footer></Footer>

image.png

image.png

image.png

注意：全局注册的组件，可以在页面任何地方使用，但是组件多了以后，main.js 就会很乱，main.js 是入口文件，不宜放太多东西

3、全局注册组件之法二---抽离 main.js

第一步：src/components/index.js里面

// 0.引入 vue
import Vue from 'vue'
// 1.引入组件
import Header from '@/components/Header'
import Table from '@/components/Table'
import Avatar from '@/components/Avatar'
import Footer from '@/components/Footer'
// 2.注册全局组件
Vue.component('Header',Header)
Vue.component('Table',Table)
Vue.component('Avatar',Avatar)
Vue.component('Footer',Footer)

第二步：main.js里面直接导入功能，不需要导入内容

import '@/components'

第三步：在页面需要的地方放入组件占位符即可

 <Header></Header>
 <Table></Table>
 <Avatar></Avatar>
 <Footer></Footer>

4、以 Vue.use() 的形式注册组件之法一

第一步：src/components/index.js里面

// 1.引入组件
import Header from '@/components/Header'
import Table from '@/components/Table'
import Avatar from '@/components/Avatar'
import Footer from '@/components/Footer'
// 2.默认导出组件
export default {
    install(Vue) {
        Vue.component('Header', Header)
        Vue.component('Table', Table)
        Vue.component('Avatar', Avatar)
        Vue.component('Footer', Footer)
    }
}

第二步：main.js里面导入并使用组件插件

import plugin from '@/components'
Vue.use(plugin)

第三步：在页面需要的地方放入组件占位符即可

 <Header></Header>
 <Table></Table>
 <Avatar></Avatar>
 <Footer></Footer>

4、以 Vue.use() 的形式注册组件之法二（子组件要写 name 名）

第一步：src/components/index.js里面

// 1.引入组件
import Header from '@/components/Header'
import Table from '@/components/Table'
import Avatar from '@/components/Avatar'
import Footer from '@/components/Footer'
// 2.默认导出组件
export default {
    install(Vue) {
        Vue.component(Header.name, Header)
        Vue.component(Table.name, Table)
        Vue.component(Avatar.name, Avatar)
        Vue.component(Footer.name, Footer)
    }

第二步：每个子组件里面必须要写 name 名（不写会报错哦）

<template>
    <div>
        <button>我是头部组件</button>
        <!-- <Avatar></Avatar> -->
    </div>
</template>

<script>
export default {
    name: 'Header',
}
</script>

<template>
    <div>
        <button>我是头像组件</button>
    </div>
</template>

<script>
export default {
    name: 'Avatar',

}
</script>

<template>
    <div>
        <button>我是表格组件</button>
    </div>
</template>

<script>
export default {
    name: 'Table',
}
</script>

<template>
    <div>
        <button>我是底部组件</button>
    </div>
</template>

<script>
export default {
    name: 'Footer',
}
</script>

第三步：main.js里面导入并使用组件插件

import plugin from '@/components'
Vue.use(plugin)

第四步：在页面需要的地方放入组件占位符即可

 <Header></Header>
 <Table></Table>
 <Avatar></Avatar>
 <Footer></Footer>

5、批量注册全局组件（子组件要写 name 名）

第一步：src/components/index.js里面批量注册组件

export default {//默认导出
    install(Vue) {
        //1.深度查找每一项
        const requireComponet = require.context('./', true, /\.vue$/)
        //2.循环遍历深度查找的每一项
        requireComponet.keys().forEach(item => {
            // 3.获取数组对象
            const moduleObj = requireComponet(item).default
            // 4.循环注册组件
            Vue.component(moduleObj.name, moduleObj)
        })
    }
}

第二步：main.js里面导入并使用组件插件

import plugin from '@/components'
Vue.use(plugin)

第三步：在页面需要的地方放入组件占位符即可

 <Header></Header>
 <Table></Table>
 <Avatar></Avatar>
 <Footer></Footer>

批量注册组件的显著优点：一劳永逸，无需每次导入导出，只管写子组件的 name 名就好,爽歪歪！

avatar
文章
阅读
粉丝