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>