在Vue项目中注册全局组件

·  阅读 1256
在Vue项目中注册全局组件

前言


一、为什么要封装全局组件?

项目中需要多次使用,进行一次封装,全局使用。迎合了es6的模块化开发思想。
复制代码

二、如何封装全局组件

为了统一管理全局组件,建议将封装的全局组件都写在src根目录下一个专门的文件夹中,比如src/components:示例中xxx、文件夹名和.vue结尾的文件的名字均可以可以自定义。

1.方法一

代码演示

代码如下(示例): 在src/components文件夹下新建 xxx文件夹,xxx文件夹下新建index.vue

<template>
	<div>
		自定义的全局组件
    </div>
</template>
复制代码

main.js中引入,注册为全局组件。

// 省略其他
// 引入
import 组件名 from '@/components/xxx'
// 注册为全局组件
Vue.component('组件名',组件名)
复制代码

2.方式二

思路

Vue官方提供的插件有 Vue Router、Vuex和Vue 服务端渲染三个
Vue.use可以接受一个对象,Vue.use(obj)
对象obj中需要一个 install 函数
在 Vue.use(obj)时,会自动调用该 install 函数,并传入到 Vue构造器
复制代码

代码演示

代码如下(示例): 在src/components文件夹下新建yyy文件夹,在yyy文件夹下新建index.vue文件

<template>
	<div>
		通过注册插件的方式,注册全局组件
	</div>
</template>
复制代码

src/components文件夹下新建index.js文件

// 引入写好的全局组件
import 组件名1 from './xxx'
import 组件名2 from './yyy'
// 默认导出插件
export default {
	install: function(Vue) {
		console.log('自定义的插件~')
		// 在自定义的插件中注册为全局组件
		Vue.component('组件名1',xxx)
		Vue.component('组件名2',yyy)
		// 也可以往Vue的原型对象上添加属性或者方法,名字可以自定义
		// 在其他.vue结尾的文件中,可以通过this,访问自己添加的属性和方法
		Vue.prototype.num = 10
		Vue.prototype.$sayHi = () => {
			alert('Hi~')
		}
	}
}
复制代码

main.js文件下,使用该插件。

import Vue from 'vue'
// 导入写好的自定义插件
import myCom from '@/components'
Vue.use(myCom)
复制代码

优点

可以增强Vue的功能
通过注册插件的方式,进行统一注册全局组件
复制代码

总结

今天就总结到这里,记得收藏哦~忘记怎么使用了就回来瞅瞅

分类:
前端
标签:
分类:
前端
标签: