組件部分

Vue.js 組件主要分成三類：

1.由 vue-router 產生的每個頁面，它本質上也是一個組件（.vue），主要承載當前頁面的 HTML 結構，會包含數據獲取、數據整理、數據可視化等常規業務。整個文件相對較大，但一般不會有 props 選項和 自定義事件，因為它作為路由的渲染，不會被復用，因此也不會對外提供接口。
2.不包含業務，獨立、具體功能的基礎組件，比如日期選擇器、模態框等。這類組件作為項目的基礎控件，會被大量使用，因此組件的 API 進行過高強度的抽象，可以通過不同配置實現不同的功能。比如開源的 iView，就是包含了 50 多個這樣基礎組件的 UI 組件庫
3.業務組件。它不像第二類獨立組件只包含某個功能，而是在業務中被多個頁面復用的，它與獨立組件的區別是，業務組件只在當前項目中會用到，不具有通用性，而且會包含一些業務，比如數據請求；而獨立組件不含業務，在任何項目中都可以使用，功能單一，比如一個具有數據校驗功能的輸入框

Vue組件API:

props slot event（自定義事件）

Vue組件通訊：

一般來說，組件可以有以下幾種關系：

A 和 B、B 和 C、B 和 D 都是父子關系，C 和 D 是兄弟關系，A 和 C 是隔代關系（可能隔多代）。組件間經常會通信，Vue.js 內置的通信手段一般有兩種：

• $ref：給元素或組件注冊引用信息。
• $parent / $children：給元素或組件注冊引用信息。

這兩種都是直接得到組件實例，使用后可以直接調用組件的方法或訪問數據，比如下面的示例中，用 ref 來訪問組件（部分代碼省略）：

// component-a
export default {
  data () {
    return {
      title: 'Vue.js'
    }
  },
  methods: {
    sayHello () {
      window.alert('Hello');
    }
  }
}

<template>
  <component-a ref="comA"></component-a>
</template>
<script>
  export default {
    mounted () {
      const comA = this.$refs.comA;
      console.log(comA.title);  // Vue.js
      comA.sayHello();  // 彈窗
    }
  }
</script>

$parent 和 $children 類似，也是基于當前上下文訪問父組件或全部子組件的。

這兩種方法的弊端是，無法在跨級或兄弟間通信，比如下面的結構：

// parent.vue
<component-a></component-a>
<component-b></component-b>
<component-b></component-b>

我們想在 component-a 中，訪問到引用它的頁面中（這里就是 parent.vue）的兩個 component-b 組件，那這種情況下，就得配置額外的插件或工具了，比如 Vuex 和 Bus 的解決方案。不過，它們都是依賴第三方插件的存在，這在開發獨立組件時是不可取的。后續陸續介紹一些黑科技，它們完全不依賴任何三方插件，就可以輕松得到任意的組件實例，或在任意組件間進行通信，且適用于任意場景。