vue2中（路由/父子/組件/事件）數據通信方法總結

最近一直在搞我司官網控制檯的重構，被產品虐的這叫一個死去活來，今天終於有時間，整理下最近用到的vue數據通信的幾種場景。

1.組件通信

這是最普通的交互場景，如下圖中，報表頁面用到了一個自己寫的下拉菜單的組件，用戶在子組件內部勾選完成後，通過觸發emit把勾選的數據傳遞給父子的data層

父級html

<domainPopSelect v-bind:domainbiztype=2 v-bind:domaintype=1 v-bind:defaultcheckedall=true v-on:selected="domainPopSelectCallback"></domainPopSelect>

父級js

//下拉彈窗 域名
domainPopSelectCallback: function(data, info){
    let mySelf = this;
    // console.log("父級接收到的數據");
    // console.log(JSON.stringify(data));
    // console.log(JSON.stringify(info));
    mySelf.search.domainSearch.domainName = data;
}

組件內部js

emitData: function(){
    // console.log('派發！！');
    console.log('派發！！');
    let mySelf = this;
    let originOptions = mySelf.originOptions;
    mySelf.$emit('selected', mySelf.selectedList, mySelf.currentInfo);
}

2.父子通信

場景是這樣的，如下圖，下面紅框是一個tab的路由頁面，上面紅框的域名是父級公共選擇的域名，當用戶切換下面tab標籤的時候，都需要能取的到父級選擇的域名

子頁面js

initQuery: function(){
    let mySelf = this;
    let currentDomain = mySelf.$parent.$parent.domainSelect.selected;
    //do ajax then
}

3.事件通信
還是上面的應用場景，當用戶切換父級域名的時候，需要聯動觸發子路由頁面的查詢，並刷新表格數據，這時候就要用到事件

父級html

<simpleSingleSelect 
    v-bind:optionsdata="domainSelect.options" 
    v-bind:selecteddata="domainSelect.selected" 
    v-bind:custominput=false 
    v-on:selected="domainSelectCallback"
    class="domain-select-wrapper">
</simpleSingleSelect>

父級js

data () {
    return {
        eventHub: new Vue()
    }
},
methods: {
    domainSelectCallback: function(data,index,info){
        // console.log(JSON.stringify(JSON.stringify(data)));
        let mySelf = this;
        mySelf.eventHub.$emit('domainChange', data.name);
    }
}

子級js

created: function () {
    let mySelf = this;
    // console.log(mySelf.$parent.$parent.eventHub);
    mySelf.$parent.$parent.eventHub.$on('domainChange', mySelf.domainChangeCallback);
},
beforeDestroy: function () {
    let mySelf = this;
    mySelf.$parent.$parent.eventHub.$off('domainChange', mySelf.domainChangeCallback);
},
methods: {
    domainChangeCallback: function(data){
        // console.log(11111111);
        // console.log(JSON.stringify(data));
        console.log("選擇了域名 開始觸發查詢！")
        let mySelf = this;
        mySelf.search.domain = data;
        mySelf.changeCurrent();
    }
}

說明：父級通過eventHub，創建了domainChange的事件，子級監聽這個事件，一旦用戶改變域名，則觸發這個事件，子級就調用domainChangeCallback事件，觸發回調。

要特別注意的是，子級在created監聽事件的同時，一定要$off，即離開當前路由時候毀掉這個事件監聽，否則用戶到了其他路由頁面，還是會監聽這個回調的，這塊我折騰半天。。

4.路由通信

應用場景是針對某一個域名的若干詳情頁面，都需要用到這個域名的名稱和類型，這樣的信息一般是放到路由當中的

路由main.js

{ 
	path: 'domainDetail/:type/:domain', 
    component: resolve => require(['./template/live/domain_detail/view.vue'], resolve),
	children: [
		{ path: 'info', component: resolve => require(['./template/live/domain_detail/info.vue'], resolve) },
		{ path: 'authority', component: resolve => require(['./template/live/domain_detail/authority.vue'], resolve) },
		{ path: 'transcode', component: resolve => require(['./template/live/domain_detail/transcode.vue'], resolve) },
		{ path: 'callback', component: resolve => require(['./template/live/domain_detail/callback.vue'], resolve) },
		{ path: 'record', component: resolve => require(['./template/live/domain_detail/record.vue'], resolve) },
		{ path: 'screenshot', component: resolve => require(['./template/live/domain_detail/screenshot.vue'], resolve) },
		{ path: 'safetyChain', component: resolve => require(['./template/live/domain_detail/safety_chain.vue'], resolve) }
	]
}

子頁面js

mounted() {
    let mySelf = this;
    let domain = mySelf.$route.params.domain;
    let type = mySelf.$route.params.type;
    // console.log("當前查詢域名" + domain);
    mySelf.domain = domain;
    mySelf.type = type;
    // mySelf.initQuery();
}