组件-全局注册

目标

1. 将工具栏组件进行全局注册

2. 熟练将组件抽取成全局组件的流程

讲解

分析

在上一节，我们将业务组件在 components 中进行注册，定义成了局部组件，这种方式能够满足我们的业务，但这种写法会导致公用的组件需要在多个组件中分别进行注册，造成代码冗余。因此我们会将 全局通用组件进行全局注册

1. 将组件在入口文件进行导入

2. 使用 Vue.component 进行全局组件的绑定

实现

1. 在 main.js 文件中导入组件并进行注册

// 导入组件
importPageToolsfrom'@/components/PageTools'
​
// 注册组件
Vue.component('PageTools', PageTools)

2. 将局部注册的导入、注册代码进行删除

小结

1. 组件使用的基本步骤有哪些?

答案

2. 注册组件, 有哪2种方式?

答案

3. 局部注册和全局注册的区别?

头部组件-Vue插件

---

上一节，虽然我们非常方便的将组件进行了全局注册
但是大家想象一个场景：如果我们需要注册的全局组件非常多，我们需要一个一个引入，然后分别调用 Vue.component 方法
main.js 文件会变的很大，不好维护，为了解决这个问题，我们学习一下 Vue插件 的形式

目标

掌握 Vue.use() 的用法，能用它来注册全局组件

讲解

分析

1. 什么是 Vue.use() ？

• 它是 Vue 提供一个静态方法，用来向 Vue 注册插件，点击 Vue-use 文档

2. 使用格式 ？

Vue.use(obj)

• Vue.use 可以接收一个对象，Vue.use(obj)

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

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

• 如果传入Vue.use()里是一个函数, 直接传入Vue构造器, 直接执行此函数

代码

1. 在 main.js 文件中体验下 Vue.use()

constMyInstall= {
  install(Vue) {
    // 在 install 方法中，使用 Vue.component 挂载组件
    Vue.component('PageTools', PageTools)
  }
}
​
Vue.use(MyInstall)

2. 我们可以把这个配置对象, 封装到src/components/index.js中, 导出此对象到main.js中给Vue.use使用

/**
 * 进行全局组件的挂载
 */
​
importPageToolsfrom'./index.vue'
​
exportdefault {
  install(Vue) {
    Vue.component('PageTools', PageTools)
  }
}

​

3. main.js中导入注册

// 导入组件

importGlobalComponentsfrom'@/components/index.js'
Vue.use(GlobalComponents)