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]);
        }
    }
}
  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 12
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值