vue踩坑筆記02---元件和全域性元件的註冊、使用

• 元件：
• 全域性元件：

元件：

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>

騷操作：
自定義的全域性元件中可以呼叫自己嗎？
不可以，會報錯

Error in nextTick: "RangeError: Maximum call stack size exceeded"

個人學習總結，歡迎批評指正