工作笔记-Vue2-定义全局组件的格式

我正在做的功能：

// 正常的注册组件是这样：
<script>
import AddorEdit from './empDialog'
import PageTool from '@/components/PageTools'
export default {
  components: {
    AddorEdit,
    PageTool
  }
}
</script>

而我将学习全局注册使用组件，因为这样可以显得我更高级，也不用在当前组件里引用注册了

// 注册成全局组件（公共组件）
// 1.进入项目中的src文件夹下的main.js文件，然后注册全局组件。
import PageTools from '@/components/PageTools'
Vue.component('PageTools',PageTools)

为啥要定义成全局的组件？

 在项目中要多次使用，所以要定义成全局的组件。

这个全局组件应该放在哪？

 src/components

定义全局组件的格式：

// 这是一个初始格式，一个伪代码，写在main.js中。
import 组件对象 from 'xxxxx.vue'
Vue.component('组件名',组件对象)

注册完之后，直接就写在template中即可了。

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

Vue.use()是干嘛用的？它对我的项目有什么好处？ 它是Vue提供的一个静态方法，用来向Vue注册插件（增强vue的功能）。

// 我之前见过的Vue.use()
Vue.use(VueRouter) // 把路由功能插件使用在了Vue上，增强了Vue的功能。
Vue.use(Vuex) // 把Vuex这个插件使用在了Vue上，增强了Vue的功能。
Vue.use(vant) // 下了vant的包，use了它，就可以在Vue上使用vant的组件和功能了。

格式：定义这个插件

// obj就是Vue的插件
const obj = {
  install : function (abc) {
  // 传入一个abc参数看看它是什么。
  console.log( '这是什么？', abc )
  // 打印后证明这个函数中的形参其实就是Vue构造器，它就是Vue本身
  console.log( abc === Vue )
  // 所以把形参名字改成Vue来用。
  }
   }

格式：加载这个插件

// 加载插件
Vue.use(obj)

真正给Vue增加一个功能：

const obj = {
  install : function (Vue) {
  // 在Vue的原型链上添加了一个$hello方法
 Vue.prototype.$hello = () => {
 // 通过this.$hello()可以在全局的组件上访问到这个提示框。
   alert('Vue')
 }
  }
   }

通过上面的代码我知道了： 我可以通过在Vue的原型链上添加属性或者方法的方式为Vue增强功能。

说明：

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

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

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