在Vue中如何注册一个全局组件 && Vue.use底层实现方法

主要使用了三个方法 

　　install:(Vue)=>{}，Vue.componet("注册的组件名","封装的组件") ,  Vue.use()；

 

eg：封装一个全局标题组件

1.建立一个titile.vue文件，将你想展示的内容写到这个文件中

<template>
  <div>
    我是全局标题组件
  </div>
</template>

<script>
  export default {
    name:"title",
    data() {
      return {
        name: 1
      }
    },
  }
</script>

<style lang="less" scoped>

</style>

2.建立一个titile.js文件，引入title.vue文件，将这个文件抛出

import Title from "./title.vue";

export default {
  install: (Vue) => {
    Vue.component("myTitle", Title)  //这个myTitle就是你页面中使用的
  }
}

3.在入口主文件中挂载组件 main.js

//自定义全局组件
import myComponets from "./components/global/title.js";
Vue.use(myComponets)


//然后在页面中直接使用<myTitle></myTitle>就可以了

ps：vue.use()方法和在prototype挂载的区别

vue.use实际上是调用了ininUse方法，这个方法有一个参数就是传递的组件，这个参数（plugin）必须是array或者object；

在这个方法里面会有一个install方法，用来注册组件，但是只有没有注册过的组件才会被注册（会有一个变量instatedPlugins来判断组件是否在该变量中存在）；

而prototype只能挂载一些方法