Vue全局组件的注册与使用

今天我们来探究一下Vue全局组件的注册与使用。基于个人的开发经验,全局组件相比局部组件来说,使用的频率还是低不少的。所以在全局组件的使用上,我个人来说比较模糊,遂打算一探究竟,并记录下来。

第1步

我们先写一个全局组件,以供使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// now-time.vue
<template>
<div>
当前时间为:{{ nowTime }}
</div>
</template>

<script>
export default {
data() {
return {
nowTime: new Date()
}
}
}
</script>
<style></style>

第2步

对全局组件进行注册。在此我们有两种注册方式。

以下代码均写在main.js

第一种注册方式:
1
2
3
4
5
6
// main.js

// 引入组件文件
import NowTime from './components/NowTime/now-time.vue'
// 直接使用Vue.component 对组件进行注册, 该组件名就是 Vue.component 的第一个参数
Vue.component('now-time', NowTime)

注册过后,即可在任意页面直接使用

1
2
<!-- 任意页面.vue -->
<now-time></now-time>
第二种注册方式:

我们需要在NowTime文件夹下新建一个index.js文件,文件目录如下:

Rgbc3n.png

1
2
3
4
5
6
7
8
9
// index.js
import NowTime from './now-time.vue'

const NowTimeComponent = {
install: (Vue) => {
Vue.component('now-time', NowTime)
}
}
export default NowTimeComponent

然后在main.js文件中进行注册

1
2
3
// main.js
import NowTime from './components/NowTime/index.js'
Vue.use(NowTime)

注册完成即可在任意页面使用了。

可能有的同学会问,这第二种注册方式看起来比第一种繁琐多了,还得写一个index.js,为什么要用这种呢?

接下来我们说说这第二种注册方式的优点:它可以在注册组件的时候,给组件传入一些通用的属性。例如:字体大小、颜色等。具体看如下代码:

我们在组件中设置字体颜色,颜色来源为this.$NOWTIME.color

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// now-time.vue
<template>
<div :style="{ color: color}">
当前时间为:{{ nowTime }}
</div>
</template>

<script>
export default {
data() {
return {
nowTime: new Date(),
color: this.$NOWTIME.color
}
}
}
</script>
<style></style>

index.js中的install()方法的第一个参数为Vue实例,第二个参数为我们在注册时传入的参数。在此处是一个对象,我们可在该对象中设置一些具体的属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
// index.js
import NowTime from './now-time.vue'

const NowTimeComponent = {
install: (Vue, otps = {}) => {
Vue.component('now-time', NowTime)
Vue.prototype.$NOWTIME = {
color: otps.color || ''
}
}
}

export default NowTimeComponent

main.js中注册组件,在Vue.use()方法中传入参数,此处传入color: 'blue',组件的字体颜色即为blue

1
2
3
4
5
// main.js
import NowTime from './components/NowTime/index.js'
Vue.use(NowTime, {
color: 'blue'
})

结语

记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

-------------本文结束感谢您的阅读-------------

本文标题:Vue全局组件的注册与使用

文章作者:老米的世界

发布时间:2021年07月03日 - 11:07

最后更新:2021年07月03日 - 13:45

原始链接:http://mpfly.github.io/2021/07/03/Vue全局组件的使用/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

老米的世界 wechat
欢迎关注我的微信公众号!
坚持原创技术分享,您的支持将鼓励我继续创作!