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>