[JavaScript知识库]如何定义一个全局组件

如何定义一个全局组件

（1）为什么要定义全局组件：在项目中要多次使用的就可以定义成全局组件

（2）全局组件写在.vue文件下的src/components

(3) 定义全局组件的方法（两种方法）：

方法一：在main.js中直接定义：

import xxx from 'xxx.vue'

eg: import PageTools from '@/componemts/PageTools'

Vue.component('组件名-字符串'，xxxx)

eg:Vue.component('PageTools',PageTools)

(4) 使用全局组件：在template中直接使用 <PageTools/>

方法二：使用Vue.use()：

格式：Vue.use(obj)

说明：1、Vue.use可以接收一个对象，Vue.use(obj)

2、对象obj中需要提供一个install函数

3、在Vue.use(obj)时，会自动调用install函数，并传入Vue构造器

在components在的index.vue中默认导出插件，在内部，注册全局组件

import xxx1(要注册公共组件) from './xxx'

export default {

install:function(Vue){

Vue.component('组件的名字'，xxx1)

}

}

在main.js中引入插件和使用插件

import xxx from '@/components'

Vue.use(xxx)