1、父?jìng)髯?/h2>

傳遞：當(dāng)子組件中在父組件中當(dāng)做標(biāo)簽使用的時(shí)候落君，給子組件綁定一個(gè)自定義屬性穿香，值為需要傳遞的數(shù)據(jù)
接收：在子組件內(nèi)部通過props進(jìn)行接收，props接收的方式有2種：
①通過數(shù)組進(jìn)行接收 props:["屬性"]
②通過對(duì)象進(jìn)行接收
props:{
（1）type:限制數(shù)據(jù)的類型
（2）default:默認(rèn)值
（3）required:布爾值绎速，和default二選一
}
步驟：
①在父組件中給子組件標(biāo)簽上添加自定義屬性：<son :custom="100"></son>
②子組件中通過props接收：props:["custom"]
③接收到的custom可以直接在標(biāo)簽中使用 {{custom}}
注意：今后只要看到props就要想到這個(gè)屬性是用來接收外部數(shù)據(jù)的皮获。

2、子傳父

①接收：當(dāng)子組件在父組件中當(dāng)做標(biāo)簽使用的時(shí)候纹冤，給當(dāng)前子組件綁定一個(gè)自定義事件洒宝，值為需要接收值的函數(shù)，這個(gè)函數(shù)不允許加 ()
②傳遞的過程：在子組件內(nèi)部通過this.$emit("自定義事件名稱",需要傳遞的參數(shù))來進(jìn)行數(shù)據(jù)的傳遞

步驟：
①父組件中給需要接收參數(shù)的子組件綁定自定義事件萌京，值為需要接收值的函數(shù)：

<son @handler="handlerMsg"></son>


methods:{
   handlerMsg(value){
       console.log(value)// 這個(gè)值是通過this.$emit()觸發(fā)傳來的
   }
}

3雁歌、非父子傳遞

第一種方法：通過給vue原型上添加一個(gè)公共的vue實(shí)例對(duì)象（vue實(shí)例對(duì)象上有emit()），需要傳遞的一方調(diào)用on()将宪。

步驟：
①main.js中：Vue.prototype.$observer=new Vue();

②需要傳遞的組件中：this.emit("handler",100);

③需要接收的組件中：
this.on("handler",(value)=>{
console.log(value)
});

注意：在掛載前（created）進(jìn)行$on()綁定，先綁定好橡庞，再觸發(fā)较坛。

第二種方法：手動(dòng)封裝事件訂閱observer

步驟：
①src下新建observer.js：

const eventList = {};

const $on = function(eventName, callback) {
    if (!eventList[eventName]) {
        eventList[eventName] = [];
    }
    eventList[eventName].push(callback);
}

const $emit = function(eventName, params) {
    if (eventList[eventName]) {
        let arr = eventList[eventName];
        arr.forEach((cb) => {
            cb(params);
        });
    }
}

const $off = function(eventName, callback) {
    if (eventList[eventName]) {
        if (callback) {
            let index = eventList[eventName].indexOf(callback);
            eventList[eventName].splice(index, 1);
        } else {
            eventList[eventName].length = 0;
        }
    }
}

export default {
    $on,
    $emit,
    $off
}

②main.js中用手動(dòng)封裝的observer替代new Vue()
import observer from "./observer.js";
Vue.prototype.observer.observer.observer.observer.$on("customHandler",this.toggle);
⑤清除自定義事件

beforeDestroy() {
    this.$observer.$off('customHandler')
},

第三種方法：事件總線（Eventbus）

步驟：
①先創(chuàng)建一個(gè)空實(shí)例：
let bus=new Vue();
②通過bus.on("customHandler",要觸發(fā)的函數(shù));
③通過bus.emit("customHandler");

第四種方法：vuex

注：如果是親兄弟：（父?jìng)髯雍妥觽鞲福?/h3>

步驟：
①父組件中聲明data數(shù)據(jù) state:true ，將state通過props傳給其中一個(gè)子組件：

<two :show="state"></two>
props:show

此時(shí)show的值隨著state的變化而變化

②再通過另一個(gè)子組件去改變父組件的state：
標(biāo)簽上綁定自定義事件：
<one @customHandler="toggle"></one>
再在子組件內(nèi)部通過emit("customHandler");

provide / inject（提供/注入）跨組件傳值扒最，其實(shí)就是父?jìng)髯?/h3>

provide / inject：依賴注入丑勤。可以實(shí)現(xiàn)跨組件傳值吧趣，數(shù)據(jù)的流向只能是向下傳遞法竞，就是大范圍有效的props
provide：這個(gè)配置項(xiàng)必須要在父級(jí)進(jìn)行使用，用來定義后代組件所需要的一些屬性和方法强挫。

provide(){
    return{
    
    }
}

inject：這個(gè)配置項(xiàng)必須在后代組件中使用岔霸，用來獲取根組件定義的跨組件傳值的數(shù)據(jù)。

 inject:{
    key:{
        from:"父組件名稱",
        default:默認(rèn)值
    }
}