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

① vue cli 簡介與安裝

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

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

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

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

② vue cli 的簡單使用

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

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

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

npm run serve // 啟動vue項目

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

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

// main.js

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

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

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

// 子組件 Son.vue

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

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

// 子組件，Son.vue

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

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

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

// 子組件 Son.vue

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

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

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

// 子組件 Son.vue

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

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

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

 

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

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

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

// 后輩組件

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

⑥ 有后輩組件向祖先組件派發(fā)事件，自然有祖先組件向后輩組件廣播事件，所謂廣播就是祖先組件通知監(jiān)聽了某個事件的組件都執(zhí)行一下對應(yīng)的事件函數(shù)，如:
// main.js 在Vue原型對象上添加一個$broadcast方法，方便所有組件調(diào)用

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

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

Son.vue 子組件

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

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

    Son組件: Li

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

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

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

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

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

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

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

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

// Parent.vue

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

// Grandson.vue

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

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

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

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

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

所有組件都可以獲取到這個$bus對象并進行收發(fā)數(shù)據(jù)通信了。