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>

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

二、全局组件

在每个地方使用同一个组件都要经过以上步骤，这样就比较麻烦。
如果一个组件在多个地方都要使用，我们可以将该组件定义为全局组件。
也就是说，只需要定义一次，就可以随意使用。

建立一个apple.js文件

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

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

再在入口文件main.js使用apple

// 导入index.js
import apple from '@/components/fruit/apple.js'

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

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