如何定义一个全局组件
(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)