vue 组件和全局组件的注册、使用

**组件：

vue中，每一个 .vue结尾的文件都是一个组件，我们直接通过import关键字，就可以使用。
举例说明。

<template>
  <div>
    <!-- 第三步：通过标签将组件渲染到页面 -->
    <apple></apple>
    <banana></banana>
  </div>
</template>

<script>
// 第一步：先导入组件
import myApple from '@/components/fruit/apple.vue'
import banana from '@/components/fruit/banana.vue'

export default {
  // 第二步：定义组件
  components: {
    // 第一项为定义的组件名，也就是要使用的标签，第二项为引入的组件
    'apple': myApple,
    // 如果两项相同时，可使用简写
    banana
  }
}
</script>

所以组件的使用方法是“先导入，后定义，再使用”。
**全局组件

在每个地方使用同一个组件都要经过以上步骤，这样就比较麻烦。
如果一个组件在多个地方都要使用，我们可以将该组件定义为全局组件。
也就是说，只需要定义一次，就可以随意使用。
举例说明。
定义一个global.js文件，用来接收所有的全局组件

// 导入组件
import myApple from '@/components/fruit/apple.vue'

export default (Vue) => {
  // 注册组件
  // 使用Vue.component()注册组件时，全局id自动作为组件的名称
  // 也就是说，此时第一参数为组件的名称
  Vue.component('apple', myApple)
}

再在入口文件main.js导入global.js文件

// 导入global.js
import global from '@/globalComponents/global.js'

// 使用全局组件
Vue.use(global)

在任意组件中直接使用定义好的全局组件
<apple></apple>