摘要：組件基礎與通信一腳手架簡介與安裝之前安裝的是模塊，之后安裝的是模塊。如果是三級組件通信，該如何處理比如父組件與孫子組件通信。和，提供和注入實現祖先組件和后代組件之間通信。

① vue cli 簡介與安裝

vue cli 3.0之前安裝的是vue-cli模塊，vue cli 3.0之后安裝的是@vue/cli模塊。
如果已經全局安裝了舊版本的 vue-cli ， 那么需要先卸載vue-cli，再全局安裝@vue/cli
雖然安裝的是vue cli，但是執行的命令仍然是vue

npm uninstall vue-cli -g // 卸載舊版本腳手架

npm install -g @vue/cli // 安裝新版本腳手架

vue --version // 檢測是否安裝成功

② vue cli 的簡單使用

通過create命令創建一個由 vue-cli-service 提供支持的新項目。即會通過vue-cli-service去啟動vue項目，從package.json文件中可以看到npm run serve實際執行的是vue-cli-service serve

vue create vue-test // 在當前目錄下創建一個vue-test項目，通過問卷的方式選擇好需要安裝的模塊后會自動安裝并初始化vue項目

cd vue-test // 進入項目根目錄下

npm run serve // 啟動vue項目

通過vue serve或者vue build直接啟動vue項目，執行vue serve命令的時候可以指定一個.vue文件或者.js文件作為啟動入口，如果沒有指定啟動入口文件，那么就會自動在當前目錄下自動尋找main.js、index.js、App.vue 或 app.vue入口文件。

如果入口文件是.js文件，那么其中必須創建一個Vue實例，并且必須添加el屬性，且其屬性值必須為"#app"，并且添加render屬性渲染一個Vue組件以便能夠顯示組件內容。
如果入口文件是.vue文件，那么可以直接渲染，.vue文件中的template里面必須要有一個根元素標簽，不限于
，但是不需要添加id為app的根元素，即根元素內容可以任意書寫

// main.js

import Vue from "vue";
import App from "./App";

const vm = new Vue({
    el: "#app", // 固定為#app，否則無法顯示App組件內容
    render: h => h(App)
});
export default vm; // 可以不對外暴露

如果父組件要向子組件傳遞數據，那么只需要在子組件中添加一個props屬性，其屬性值可以是一個數組，數組元素為一個字符串，即父組件給子組件傳遞數據時所使用的名稱，直接在子組件標簽中當作元素的一個屬性名使用；props屬性值也可以是一個對象，對象的屬性名為父組件給子組件傳遞數據時所使用的名稱，屬性值為一個對象，用于控制父組件傳遞數據的類型、默認值等
// 父組件 Parent.vue

// 子組件 Son.vue

注意，上面子組件中添加了一個按鈕用于修改value的屬性值，由于Vue規定子組件不能直接去修改父組件的值，所以會報錯。即父子組件中的數據是單向的。子組件中如果確實想要修改父組件傳遞過來的數據，那么可以在子組件中定義一個新的變量，將父組件傳遞過來的數據保存起來，這個時候子組件去修改這個新的變量對應的值就可以了，但是這樣子組件修改的值不會同步到父組件中，因為子組件修改的是自己的數據了。

① 可以在父組件中使用子組件的時候，在子組件標簽上監聽一個事件，這個事件名可以任意，比如input事件，這樣當子組件內部發射該事件后，子組件就能監聽到該事件就可以直接調用父組件中的方法進行處理，如:
//父組件 Parent.vue

// 子組件，Son.vue

 修改父組件數據
 methods: {
        change() {
            this.$emit("input", "zhang");// 子組件內部發射一個input事件
        }
 }

在父組件使用子組件的時候，給子組件標簽上添加了@input="change",子組件渲染的時候，就會在子組件上監聽該事件，就相當于 子組件.$on("input", change)，即子組件監聽到input事件后會觸發父組件上change函數的執行，所以該種方式其實就是利用父子組件單向數據流特性，由子組件發起事件，通過修改父組件中的數據來實現父子組件數據的同步，本質就是修改父組件數據

② 父組件向子組件傳遞數據的時候，使用sync修飾符來修飾子組件上用于接收父組件數據的變量名，同時子組件內部發射一個update:value事件也可以實現父子組件數據的同步更新，如:
// 父組件 Parent.vue

// 子組件 Son.vue

methods: {
        change() {
            this.$emit("update:value", "zhang"); // 子組件發射update:value事件
        }
}

sync修飾符其實就是在子組件上綁定值的同時監聽了@update:value事件，是一種語法糖，但是子組件上必須發射固定名稱的update:value事件才會起作用。
需要注意的是，這里所謂的固定名稱中value是不固定的，value只是一個子組件用于接收父組件數據時所定義的變量(屬性)，比如子組件上定義的用于接收父組件的變量是surname，那么子組件就要發射"update:surname"事件了，父組件傳遞數據的時候就要使用:surname.sync="firstName"了

③ 如果子組件上定義的用于接收父組件數據的屬性(變量)是value，并且在子組件中監聽的是@input事件，那么我們可以直接簡寫成v-model，因為v-model實際就是綁定value的值并且監聽@input事件，如:
// 父組件 Parent.vue

// 子組件 Son.vue

methods: {
        change() {
            this.$emit("input", "zhang");// 必須是發射input事件
        }
    }

sync和v-model都能實現父子組件數據的同步，但是v-model相對比較局限，屬性名必須是value，事件名必須是input，而sync修飾符屬性名可以任意。

④ 如果是三級組件通信，該如何處理？比如父組件與孫子組件通信。
同樣，我們也可以利用單向數據流的原理，我們只要能夠改變父組件上的數據，那么兒子組件和孫子組件上的數據都會進行相應的修改了，而前面父子組件通信的時候是通過子組件發射一個input事件來調用父組件的方法去改變父組件上的數據的，由于孫子組件直接發射一個input事件，父組件上是監聽不到，因為父組件上監聽的是子組件內部發射的input事件，但是我們可以通過孫子組件的$parent屬性獲取到子組件，然后通過子組件去發射input事件，那么父組件就能監聽到input事件了，從而改變父組件中的數據，實現三級組件通信，如:
// 孫子組件 Grandson.vue

 

        Grandson組件: {{value}}
        修改我的父組件數據
 
 methods: {
        changeParent() {
            this.$parent.$emit("input", "Wang");// 通過孫子組件的父組件去發射input事件
        }
 }   

⑤ 如果是多級組件通信呢？我也可以通過前面三級組件通信原理，我們只要遍歷當前組件的所有祖先組件，然后讓所有祖先組件都發射一個input事件，這樣一層一層發射input事件，那么最終頂層的父組件肯定能夠收到一個input事件從而改變頂層父組件的數據，實現多級組件之間的通信。如:
// main.js 在Vue原型對象上添加一個$dispatch方法，方便后輩組件調用

Vue.prototype.$dispatch = function (eventName, data) { // 切勿使用箭頭函數
    let parent = this.$parent; // 獲取調用$dispatch方法的父組件
    while(parent) { 遍歷祖先組件，一層一層發射相應的事件
        parent.$emit(eventName, data);
        parent = parent.$parent;
    }
}

// 后輩組件

methods: {
        changeParent() {
            this.$dispatch("input", "Wang"); // 派發一個input事件，其祖先組件都會發生input事件
        }
    }

⑥ 有后輩組件向祖先組件派發事件，自然有祖先組件向后輩組件廣播事件，所謂廣播就是祖先組件通知監聽了某個事件的組件都執行一下對應的事件函數，如:
// main.js 在Vue原型對象上添加一個$broadcast方法，方便所有組件調用

Vue.prototype.$broadcast = function(eventName, data) {
    const broadcast = (children) => { // 遞歸調用broadcast方法
        children.forEach((child) => { // 遍歷子組件，每個子組件都發射一個指定的事件
            child.$emit(eventName, data);
            if (child.$children) { // 如果子組件上還有子組件
                broadcast(child.$children) // 遞歸調用
            }
        });
    }
    broadcast(this.$children);
}

⑦ v-bind和$attrs、v-on和$listenners的用法
當我們在組件內部并沒有定義props屬性來接收父組件傳遞過來的數據時，這些非prop聲明的屬性將會原封不動的添加到組件渲染后的html標簽上，如:
// Parent.vue父組件

Son.vue 子組件

export default {
    props: ["value"] // 子組件上只定義了一個value屬性用于接收父組件上的數據
}

子組件渲染完成后，除value屬性外，name和age屬性都原封不動添加到了html標簽上，如:

    Son組件: Li

如果不想這些父組件傳遞過來的非prop屬性出現在html標簽上，那么可以在子組件上添加一個inheritAttrs屬性，并且屬性值設置為false。

export default {
    inheritAttrs: false, // 不在html標簽上繼承非prop屬性
    props: ["value"] // 子組件上只定義了一個value屬性用于接收父組件上的數據
}

需要注意的是雖然設置了inheritAttrs為false，但是子組件上還是具有$attrs屬性的，通過$attrs屬性還是可以獲取到那些來自父組件傳遞過來的非prop屬性的，$attrs為一個對象，對象屬性名為非prop屬性名，如上子組件上的$attrs值為{name: "Si", age: 18}

如果v-bind不綁定屬性，直接賦值一個對象的時候，那么其會將對象的屬性名當作組件的屬性名，將對象的屬性值傳遞給組件，如:
// Son.vue

所以如果父組件傳遞給子組件的數據，子組件不想用(子組件并未定義相應的props屬性進行接收)，但是孫子組件想用，那么可以通過v-bind直接傳遞給孫子組件，如:
// Son.vue

同樣的，還有$listeners，其包含的是
父作用域中不含.native修飾的事件監聽器，如上面例子，在父作用域中的Son組件上監聽了input事件，那么Son組件內就可以通過$listeners.input()執行input的事件函數。
當然也可以通過v-on="$listeners"傳遞給孫子組件使用。
其主要區別就是: $attrs是組件上屬性的集合，$listeners是組件上方法(事件)的集合。

⑧ provide和inject，提供和注入實現祖先組件和后代組件之間通信。

可以通過provide()提供一個對象數據到父組件上，然后其后代組件就可以通過inject將祖先組件上的數據注入到后代組件中

// Parent.vue

export default {
    provide() { // 提供一個數據到祖先組件上
        return {
            money: 1000000
        }
    }
}

// Grandson.vue

export default {
    inject: ["money"] // 在后代組件中注入提供到祖先組件上的數據
}
// Grandson組件就可以直接通過this.money獲取到數據了

⑨ 獲取子組件或者子標簽的引用，父組件可以通過$refs屬性獲取到添加了ref屬性的子組件或者子標簽對象，然后進行相應的操作，如:

export default {
    mounted() {
        this.$refs.son.say(); // 通過$refs獲取到組件，然后調用其say方法
    }
}

⑩ 通過eventBus進行通信，所謂eventBus就是一個公共的Vue實例，所有組件都通過這個公共的Vue實例進行發射和監聽事件，如:

Vue.prototype.$bus = new Vue(); // 將這個eventBus對象暴露到原型上方便調用

所有組件都可以獲取到這個$bus對象并進行收發數據通信了。