vue-cli：学会优雅注册全局组件[无脑cv]

Posted 2021-07-05 前端呆头鹅

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-cli：学会优雅注册全局组件[无脑cv]相关的知识，希望对你有一定的参考价值。

文章目录

一普通的全局注册
二优雅的全局注册

一普通的全局注册

1.1 定义

首先定义两个组件。

// src>components>rk-a
<template>
  <div class="rk-a">
    第一个全局组件rk-a
  </div>
</template>

// src>components>rk-b
<template>
  <div class="rk-a">
    第二个全局组件rk-b
  </div>
</template>

1.2 注册

在main.js中注册两个组件。

// src>main.js
import RkA from './components/rk-a.vue'
import RkB from './components/rk-b.vue'
...
Vue.component('RkA',RkA)
Vue.component('RkB',RkB)

1.3 使用

在App.vue中使用两个组件。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <RkA />
    <RkB />
  </div>
</template>

二优雅的全局注册

上面的注册方式，如果全局组件较多，main.js会比较大，最好能将全局组件统一管理，统一引入。

2.1 注册

在component文件夹下创建index.js。

// src>components>index.js
import RkA from './rk-a.vue'
import RkB from './rk-b.vue'

const components = {
    RkA,
    RkB
}

export default {
    install: (vue) => {
        for(let key in components){
            vue.component(key, components[key]);
        }
    }
}

在main.js中通过index注册两个组件。

// src>main.js
import components from './components'
...
Vue.use(components)
...

2.2 使用

在全局vue中就可以直接使用组件了。

<template>
  <div>
    <RkA />
    <RkB />
  </div>
</template>

2.3 添加全局组件

如果添加了组件rk-c，我们不需要更改main.js，而只需要添加rk-c文件后，在index.js中添加rk-c的注册即可。

// src>components>index.js
import RkA from './rk-a.vue'
import RkB from './rk-b.vue'
import RkC from './rk-c.vue'  // 添加

const components = {
    RkA,
    RkB,
    RkC  //添加
}

export default {
    install: (vue) => {
        for(let key in components){
            vue.component(key, components[key]);
        }
    }
}